Picking a DOM node focuses the tree

Author: gaearon

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) => {

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]

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>