Picking a DOM node focuses the tree
Dan Abramov committed
Apr 10, 2019 at 18:13 UTC
1c381c588aed1ed6814f1be04fbe42cd069ce174
3 files changed
+17
-2
src/backend/agent.js
+1
-1
@@ -479,7 +479,7 @@ export default class Agent extends EventEmitter {
479
event.stopPropagation();
480
481
this.stopInspectingDOM();
482
- this._bridge.send('stopInspectingDOM');
482
+ this._bridge.send('stopInspectingDOM', true);
483
};
484
485
_onMouseDown = (event: MouseEvent) => {
src/devtools/views/Components/InspectHostNodesToggle.js
+1
-1
@@ -16,7 +16,7 @@ export default function InspectHostNodesToggle() {
16
if (isChecked) {
17
bridge.send('startInspectingDOM');
18
} else {
19
- bridge.send('stopInspectingDOM');
19
+ bridge.send('stopInspectingDOM', false);
20
}
21
},
22
[bridge]
src/devtools/views/Components/Tree.js
+15
@@ -52,6 +52,7 @@ export default function Tree(props: Props) {
52
// $FlowFixMe https://github.com/facebook/flow/issues/7341
53
const listRef = useRef<FixedSizeList<ItemData> | null>(null);
54
const treeRef = useRef<HTMLDivElement | null>(null);
55
+ const focusTargetRef = useRef<HTMLDivElement | null>(null);
56
57
const [treeFocused, setTreeFocused] = useState<boolean>(false);
58
@@ -69,6 +70,19 @@ export default function Tree(props: Props) {
70
}
71
}, [listRef, selectedElementIndex]);
72
73
+ // Picking an element in the inspector should put focus into the tree.
74
+ // This ensures that keyboard navigation works right after picking a node.
75
+ useEffect(() => {
76
+ function handleStopInspectingDOM(didSelectNode) {
77
+ if (didSelectNode && focusTargetRef.current !== null) {
78
+ focusTargetRef.current.focus();
79
+ }
80
+ }
81
+ bridge.addListener('stopInspectingDOM', handleStopInspectingDOM);
82
+ return () =>
83
+ bridge.removeListener('stopInspectingDOM', handleStopInspectingDOM);
84
+ }, [bridge]);
85
+
86
// This ref is passed down the context to elements.
87
// It lets them avoid autoscrolling to the same item many times
88
// when a selected virtual row goes in and out of the viewport.
@@ -204,6 +218,7 @@ export default function Tree(props: Props) {
218
onFocus={handleFocus}
219
onKeyPress={handleKeyPress}
220
onMouseLeave={handleMouseLeave}
221
+ ref={focusTargetRef}
222
tabIndex={0}
223
>
224
<AutoSizer>