From 6163029d4af7528b441a6db153bb6449f16951cf Mon Sep 17 00:00:00 2001
From: Tianyu Yao <skyyao@fb.com>
Date: Mon, 12 Sep 2022 16:56:19 -0700
Subject: [PATCH] Fix selectNode in fabric

Summary:
Changelog:
[General][Fixed] - Currently selectNode doesn't work for Fabric. Passing the instance instead of a tag to `selectNode` works.

Reviewed By: lunaruan

Differential Revision: D38851141

fbshipit-source-id: 7640d0f31fb099346a4d8205981e262da6be4990
---
 Libraries/Inspector/DevtoolsOverlay.js |  8 ++++++--
 Libraries/Inspector/Inspector.js       | 10 ++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/Libraries/Inspector/DevtoolsOverlay.js b/Libraries/Inspector/DevtoolsOverlay.js
index 1cd51d3bef3..7336241162c 100644
--- a/Libraries/Inspector/DevtoolsOverlay.js
+++ b/Libraries/Inspector/DevtoolsOverlay.js
@@ -121,8 +121,12 @@ export default function DevtoolsOverlay({
         locationX,
         locationY,
         viewData => {
-          const {touchedViewTag} = viewData;
-          if (touchedViewTag != null) {
+          const {touchedViewTag, closestInstance} = viewData;
+          if (closestInstance != null) {
+            // Fabric
+            agent.selectNode(closestInstance);
+            return true;
+          } else if (touchedViewTag != null) {
             agent.selectNode(findNodeHandle(touchedViewTag));
             return true;
           }
diff --git a/Libraries/Inspector/Inspector.js b/Libraries/Inspector/Inspector.js
index ffa638e6d6e..0c2b873cb7e 100644
--- a/Libraries/Inspector/Inspector.js
+++ b/Libraries/Inspector/Inspector.js
@@ -136,13 +136,19 @@ class Inspector extends React.Component<
         frame,
         pointerY,
         touchedViewTag,
+        closestInstance,
       } = viewData;
 
       // Sync the touched view with React DevTools.
       // Note: This is Paper only. To support Fabric,
       // DevTools needs to be updated to not rely on view tags.
-      if (this.state.devtoolsAgent && touchedViewTag) {
-        this.state.devtoolsAgent.selectNode(findNodeHandle(touchedViewTag));
+      if (this.state.devtoolsAgent) {
+        if (closestInstance != null) {
+          // Fabric
+          this.state.devtoolsAgent.selectNode(closestInstance);
+        } else if (touchedViewTag != null) {
+          this.state.devtoolsAgent.selectNode(findNodeHandle(touchedViewTag));
+        }
       }
 
       this.setState({