From f78899b69f8ac42bcf8de027df79722fc0ff4ee1 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Thu, 24 Nov 2022 09:23:16 -0800
Subject: [PATCH] Store context menu open in app wide state to disable all
 hover effects which cause rerenders and mess up the context menu

Summary: Mouse over event still fires for the dom nodes behind the context menu modal. This will cause state changes and rerenders. Some of the state the context menu depends on can change so it would cause the context menu items to change while its stil open. Now we dont fire those hover state changes while context menu active

Reviewed By: lblasa

Differential Revision: D41494947

fbshipit-source-id: 17918f15d74230d9c7070a4de7a0a0ce10a08001
---
 desktop/plugins/public/ui-debugger/components/Tree.tsx | 9 ++++++++-
 desktop/plugins/public/ui-debugger/index.tsx           | 4 ++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx
index 23c16ceb4..23d2beeb3 100644
--- a/desktop/plugins/public/ui-debugger/components/Tree.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Tree.tsx
@@ -108,7 +108,9 @@ export function Tree(props: {
             },
 
             onMouseOver: () => {
-              instance.hoveredNodes.set([item.index]);
+              if (!instance.isContextMenuOpen.get()) {
+                instance.hoveredNodes.set([item.index]);
+              }
             },
           }),
         }}>
@@ -201,12 +203,16 @@ const ContextMenu: React.FC<ContextMenuProps> = ({id, title, children}) => {
 
   return (
     <Dropdown
+      onVisibleChange={(visible) => {
+        instance.isContextMenuOpen.set(visible);
+      }}
       overlay={() => (
         <Menu>
           {focusedNode !== head(instance.hoveredNodes.get()) && (
             <Menu.Item
               onClick={() => {
                 instance.focusedNode.set(id);
+                instance.isContextMenuOpen.set(false);
               }}>
               Focus {title}
             </Menu.Item>
@@ -216,6 +222,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({id, title, children}) => {
             <Menu.Item
               onClick={() => {
                 instance.focusedNode.set(undefined);
+                instance.isContextMenuOpen.set(false);
               }}>
               Remove focus
             </Menu.Item>
diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx
index 9f6fa540b..5bb3e345f 100644
--- a/desktop/plugins/public/ui-debugger/index.tsx
+++ b/desktop/plugins/public/ui-debugger/index.tsx
@@ -48,6 +48,9 @@ export function plugin(client: PluginClient<Events>) {
     perfEvents.append(event);
   });
 
+  //used to disabled hover effects which cause rerenders and mess up the existing context menu
+  const isContextMenuOpen = createState<boolean>(false);
+
   const focusedNode = createState<Id | undefined>(undefined);
 
   const nodes = createState<Map<Id, UINode>>(new Map());
@@ -108,6 +111,7 @@ export function plugin(client: PluginClient<Events>) {
 
   return {
     rootId,
+    isContextMenuOpen,
     nodes,
     metadata,
     focusedNode,