From 3b793953b1ec26e69a2b3a537880b3af9992ccba Mon Sep 17 00:00:00 2001
From: Dan <dan.abramov@gmail.com>
Date: Mon, 8 Apr 2019 23:46:23 +0100
Subject: [PATCH] Keep DOM selection if last $0 resolves to same component

---
 src/backend/agent.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/backend/agent.js b/src/backend/agent.js
index 5c85cd4562..c6d7055245 100644
--- a/src/backend/agent.js
+++ b/src/backend/agent.js
@@ -296,12 +296,19 @@ export default class Agent extends EventEmitter {
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
     } else {
-      // Update the active DOM node on the global hook object.
-      // The content script will read this to update window.$0
-      // when we switch tabs.
+      // When a different React component is selected, we want to store
+      // the active DOM node ($0) on the global hook so that content script
+      // can update the native elements panel to match it.
       const node = ((renderer.findNativeByFiberID(id): any): HTMLElement);
       if (node !== null) {
-        window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
+        // However, we don't want to do it if the current $0 node already
+        // belongs to this component. In this case we were probably inspecting
+        // a part of its host subtree, and changing $0 would be disuptive.
+        const prev$0 = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
+        const prev$0ID = this.getIDForNode(prev$0);
+        if (prev$0ID !== id) {
+          window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
+        }
       }
       renderer.selectElement(id);
       this._bridge.send('selectElement');