From 1c381c588aed1ed6814f1be04fbe42cd069ce174 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 10 Apr 2019 18:13:29 +0100
Subject: [PATCH] Picking a DOM node focuses the tree

---
 src/backend/agent.js                              |  2 +-
 .../views/Components/InspectHostNodesToggle.js    |  2 +-
 src/devtools/views/Components/Tree.js             | 15 +++++++++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 3c1600bae0..528c5715fe 100644
--- 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
index a20107fcb7..c0893f7fa3 100644
--- 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
index f8a5da8fc3..be3316df51 100644
--- 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>