Issue #3509483 by omkar-pd, larowlan: Don't show the component preview if the context menu is open

ui/src/components/list/ExposedJsComponent.tsx

@@ -27,9 +27,12 @@ function removeJsPrefix(input: string): string {
   return input;
 }
 
-const ExposedJsComponent: React.FC<{ component: JSComponent }> = (props) => {
+const ExposedJsComponent: React.FC<{
+  component: JSComponent;
+  onMenuOpenChange?: (open: boolean) => void;
+}> = (props) => {
   const dispatch = useAppDispatch();
-  const { component } = props;
+  const { component, onMenuOpenChange } = props;
   const machineName = removeJsPrefix(component.id);
   const { data: jsComponent, error } = useGetCodeComponentQuery(machineName);
   const layout = useAppSelector(selectLayout);
@@ -90,7 +93,12 @@ const ExposedJsComponent: React.FC<{ component: JSComponent }> = (props) => {
     </>
   );
   return (
-    <ContextMenu.Root key={component.id}>
+    <ContextMenu.Root
+      key={component.id}
+      onOpenChange={(open) => {
+        onMenuOpenChange?.(open);
+      }}
+    >
       <ContextMenu.Trigger>
         <SidebarNode
           title={component.name}
@@ -102,6 +110,7 @@ const ExposedJsComponent: React.FC<{ component: JSComponent }> = (props) => {
             </UnifiedMenu.Content>
           }
           selected={machineName === selectedComponent}
+          onMenuOpenChange={onMenuOpenChange}
         />
       </ContextMenu.Trigger>
       <UnifiedMenu.Content

ui/src/components/list/ListItem.tsx

@@ -27,6 +27,7 @@ const ListItem: React.FC<{
 }> = (props) => {
   const { item, type } = props;
   const dispatch = useAppDispatch();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const layout = useAppSelector(selectLayout);
   const [previewingComponent, setPreviewingComponent] = useState<
     XBComponent | Section
@@ -73,7 +74,9 @@ const ListItem: React.FC<{
   };
 
   const handleMouseEnter = (component: XBComponent | Section) => {
-    setPreviewingComponent(component);
+    if (!isMenuOpen) {
+      setPreviewingComponent(component);
+    }
   };
 
   const renderItem = () => {
@@ -83,7 +86,10 @@ const ListItem: React.FC<{
     ) {
       return (
         <div>
-          <ExposedJsComponent component={item as JSComponent} />
+          <ExposedJsComponent
+            component={item as JSComponent}
+            onMenuOpenChange={setIsMenuOpen}
+          />
         </div>
       );
     }
@@ -123,7 +129,7 @@ const ListItem: React.FC<{
               className={styles.componentPreviewTooltipContent}
             >
               <Theme>
-                {previewingComponent && (
+                {previewingComponent && !isMenuOpen && (
                   <ComponentPreview componentListItem={previewingComponent} />
                 )}
               </Theme>

ui/src/components/sidebar/SidebarNode.tsx

@@ -38,6 +38,7 @@ const SidebarNode = React.forwardRef<
     dropdownMenuContent?: React.ReactNode;
     open?: boolean;
     className?: string;
+    onMenuOpenChange?: (open: boolean) => void;
   } & React.HTMLAttributes<HTMLDivElement>
 >(
   (
@@ -50,6 +51,7 @@ const SidebarNode = React.forwardRef<
       dropdownMenuContent = null,
       open = false,
       className,
+      onMenuOpenChange,
       ...props
     },
     ref,
@@ -90,7 +92,11 @@ const SidebarNode = React.forwardRef<
           </Flex>
         </Flex>
         {dropdownMenuContent && (
-          <DropdownMenu.Root>
+          <DropdownMenu.Root
+            onOpenChange={(open) => {
+              onMenuOpenChange?.(open);
+            }}
+          >
             <DropdownMenu.Trigger>
               <button aria-label="Open contextual menu">
                 <span className={styles.dots}>