Picking a DOM node focuses the tree

gaearon · gaearon · commit 1c381c588aed · 2019-04-10T18:27:40.000+01:00
diff --git a/src/backend/agent.js b/src/backend/agent.js
@@ -479,7 +479,7 @@ export default class Agent extends EventEmitter {
     event.stopPropagation();
 
     this.stopInspectingDOM();
-    this._bridge.send('stopInspectingDOM');
+    this._bridge.send('stopInspectingDOM', true);
   };
 
   _onMouseDown = (event: MouseEvent) => {
diff --git a/src/devtools/views/Components/InspectHostNodesToggle.js b/src/devtools/views/Components/InspectHostNodesToggle.js
@@ -16,7 +16,7 @@ export default function InspectHostNodesToggle() {
       if (isChecked) {
         bridge.send('startInspectingDOM');
       } else {
-        bridge.send('stopInspectingDOM');
+        bridge.send('stopInspectingDOM', false);
       }
     },
     [bridge]
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
@@ -52,6 +52,7 @@ export default function Tree(props: Props) {
   // $FlowFixMe https://github.com/facebook/flow/issues/7341
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
   const treeRef = useRef<HTMLDivElement | null>(null);
+  const focusTargetRef = useRef<HTMLDivElement | null>(null);
 
   const [treeFocused, setTreeFocused] = useState<boolean>(false);
 
@@ -69,6 +70,19 @@ export default function Tree(props: Props) {
     }
   }, [listRef, selectedElementIndex]);
 
+  // Picking an element in the inspector should put focus into the tree.
+  // This ensures that keyboard navigation works right after picking a node.
+  useEffect(() => {
+    function handleStopInspectingDOM(didSelectNode) {
+      if (didSelectNode && focusTargetRef.current !== null) {
+        focusTargetRef.current.focus();
+      }
+    }
+    bridge.addListener('stopInspectingDOM', handleStopInspectingDOM);
+    return () =>
+      bridge.removeListener('stopInspectingDOM', handleStopInspectingDOM);
+  }, [bridge]);
+
   // This ref is passed down the context to elements.
   // It lets them avoid autoscrolling to the same item many times
   // when a selected virtual row goes in and out of the viewport.
@@ -204,6 +218,7 @@ export default function Tree(props: Props) {
         onFocus={handleFocus}
         onKeyPress={handleKeyPress}
         onMouseLeave={handleMouseLeave}
+        ref={focusTargetRef}
         tabIndex={0}
       >
         <AutoSizer>

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export default function InspectHostNodesToggle() {`
`16`	`16`	`if (isChecked) {`
`17`	`17`	`bridge.send('startInspectingDOM');`
`18`	`18`	`} else {`
`19`		`- bridge.send('stopInspectingDOM');`
	`19`	`+ bridge.send('stopInspectingDOM', false);`
`20`	`20`	`}`
`21`	`21`	`},`
`22`	`22`	`[bridge]`