[DevTools] Clear element inspection if host element not owned by any renderer is selected

Author: eps1lon

packages/react-devtools-shared/src/backend/agent.js

@@ -940,9 +940,17 @@ export default class Agent extends EventEmitter<{
 
   selectNode(target: HostInstance): void {
     const match = this.getIDForHostInstance(target);
-    if (match !== null) {
-      this._bridge.send('selectElement', match.id);
-    }
+    this._bridge.send(
+      'selectElement',
+      match !== null
+        ? match.id
+        : // If you click outside a React root in the Elements panel, we want to give
+          // feedback that no selection is possible so we clear the selection.
+          // Otherwise clicking outside a React root is indistinguishable from clicking
+          // a different host node that leads to the same selected React element
+          // due to Component filters
+          null,
+    );
   }
 
   registerRendererInterface(

packages/react-devtools-shared/src/bridge.js

@@ -214,7 +214,7 @@ export type BackendEvents = {
   profilingStatus: [boolean],
   reloadAppForProfiling: [],
   saveToClipboard: [string],
-  selectElement: [number],
+  selectElement: [number | null],
   shutdown: [],
   stopInspectingHost: [boolean],
   scrollTo: [{left: number, top: number, right: number, bottom: number}],

packages/react-devtools-shared/src/devtools/store.js

@@ -147,7 +147,7 @@ export default class Store extends EventEmitter<{
   enableSuspenseTab: [],
   error: [Error],
   hookSettings: [$ReadOnly<DevToolsHookSettings>],
-  hostInstanceSelected: [Element['id']],
+  hostInstanceSelected: [Element['id'] | null],
   settingsUpdated: [$ReadOnly<DevToolsHookSettings>],
   mutated: [
     [
@@ -2381,7 +2381,7 @@ export default class Store extends EventEmitter<{
     this._bridge.send('getHookSettings'); // Warm up cached hook settings
   };
 
-  onHostInstanceSelected: (elementId: number) => void = elementId => {
+  onHostInstanceSelected: (elementId: number | null) => void = elementId => {
     if (this._lastSelectedHostInstanceElementId === elementId) {
       return;
     }

packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js

@@ -967,7 +967,7 @@ function TreeContextController({
 
   // Listen for host element selections.
   useEffect(() => {
-    const handler = (id: Element['id']) =>
+    const handler = (id: Element['id'] | null) =>
       transitionDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: id});
 
     store.addListener('hostInstanceSelected', handler);