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

@@ -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>