fix(react-components): 3D resources Submenu disappear in FDX when hovered

react-components/src/components/RevealContainer/RevealContainer.tsx

@@ -59,7 +59,10 @@ export function RevealContainer({
   return (
     <SDKProvider sdk={sdk}>
       <QueryClientProvider client={queryClient}>
-        <div style={{ width: '100%', height: '100%', overflow: 'hidden' }} ref={wrapperDomElement}>
+        <div
+          style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+          ref={wrapperDomElement}
+          id="reveal-canvas-dom-element">
           {mountChildren()}
         </div>
       </QueryClientProvider>

react-components/src/components/RevealToolbar/LayersButton.tsx

@@ -19,6 +19,7 @@ import { isEqual } from 'lodash';
 export const LayersButton = (): ReactElement => {
   const viewer = useReveal();
   const [layersEnabled, setLayersEnabled] = useState<boolean>(false);
+  const [visible, setVisible] = useState<boolean>(false);
 
   const [cadModelIds, setCadModelIds] = useState<number[]>([]);
   const [pointCloudModelIds, setPointCloudModelIds] = useState<number[]>([]);
@@ -36,6 +37,7 @@ export const LayersButton = (): ReactElement => {
 
   const showLayers = (): void => {
     setLayersEnabled(!layersEnabled);
+    setVisible((prevState) => !prevState);
   };
 
   useEffect(() => {
@@ -146,9 +148,15 @@ export const LayersButton = (): ReactElement => {
     setReveal3DResourcesLayerData(updated3DResourcesLayerData);
   }, [updated3DResourcesLayerData]);
 
+  useEffect(() => {
+    viewer.on('click', () => {
+      setVisible(false);
+    });
+  }, [viewer]);
+
   return (
     <Dropdown
-      appendTo={document.body}
+      appendTo={document.getElementById('reveal-canvas-dom-element') ?? document.body}
       content={
         <LayersContainer
           props={{
@@ -157,6 +165,7 @@ export const LayersButton = (): ReactElement => {
           }}
         />
       }
+      visible={visible}
       placement="auto">
       <Button type="ghost" icon="Layers" aria-label="3D Resource layers" onClick={showLayers} />
     </Dropdown>

react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx

@@ -2,7 +2,7 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type ReactElement } from 'react';
+import { useState, type ReactElement } from 'react';
 import { useReveal } from '../../RevealContainer/RevealContext';
 import { type CogniteCadModel } from '@cognite/reveal';
 import { Checkbox, Flex, Menu } from '@cognite/cogs.js';
@@ -16,6 +16,7 @@ export const CadModelLayersContainer = ({
   layerProps: Reveal3DResourcesLayersProps;
 }): ReactElement => {
   const viewer = useReveal();
+  const [visible, setVisible] = useState(false);
 
   const { cadLayerData } = layerProps.reveal3DResourcesLayerData;
 
@@ -63,6 +64,7 @@ export const CadModelLayersContainer = ({
         {cadLayerData.map((data) => (
           <Menu.Item
             key={uniqueId()}
+            hideTooltip={true}
             hasCheckbox
             checkboxProps={{
               checked: data.isToggled,
@@ -81,14 +83,28 @@ export const CadModelLayersContainer = ({
   return (
     <>
       {cadLayerData.length > 0 && (
-        <Menu.Submenu content={cadModelContent()} title="CAD models">
-          <Flex direction="row" justifyContent="space-between" gap={4}>
+        <Menu.Submenu
+          appendTo={document.getElementById('reveal-canvas-dom-element') ?? document.body}
+          visible={visible}
+          onClickOutside={() => {
+            setVisible(false);
+          }}
+          content={cadModelContent()}
+          title="CAD models">
+          <Flex
+            direction="row"
+            justifyContent="space-between"
+            gap={4}
+            onClick={() => {
+              setVisible((prevState) => !prevState);
+            }}>
             <Checkbox
               checked={someModelVisible}
               indeterminate={indeterminate}
               onChange={(e) => {
                 e.stopPropagation();
                 handleAllCadModelsVisibility(e.target.checked);
+                setVisible(true);
               }}
             />
             <StyledLabel> CAD models </StyledLabel>

react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx

@@ -2,7 +2,7 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type ReactElement } from 'react';
+import { useState, type ReactElement } from 'react';
 import { useReveal } from '../../RevealContainer/RevealContext';
 import { Checkbox, Flex, Menu } from '@cognite/cogs.js';
 import { StyledChipCount, StyledLabel, StyledSubMenu } from './elements';
@@ -16,6 +16,7 @@ export const Image360CollectionLayerContainer = ({
   layerProps: Reveal3DResourcesLayersProps;
 }): ReactElement => {
   const viewer = useReveal();
+  const [visible, setVisible] = useState(false);
   const { image360LayerData } = layerProps.reveal3DResourcesLayerData;
 
   const count = image360LayerData.length.toString();
@@ -79,14 +80,27 @@ export const Image360CollectionLayerContainer = ({
   return (
     <>
       {image360LayerData.length > 0 && (
-        <Menu.Submenu content={image360Content()} title="360 images">
-          <Flex direction="row" justifyContent="space-between">
+        <Menu.Submenu
+          appendTo={document.getElementById('reveal-canvas-dom-element') ?? document.body}
+          visible={visible}
+          onClickOutside={() => {
+            setVisible(false);
+          }}
+          content={image360Content()}
+          title="360 images">
+          <Flex
+            direction="row"
+            justifyContent="space-between"
+            onClick={() => {
+              setVisible((prevState) => !prevState);
+            }}>
             <Checkbox
               checked={someImagesVisible}
               indeterminate={indeterminate}
               onChange={(e) => {
                 e.stopPropagation();
                 handleAll360ImagesVisibility(e.target.checked);
+                setVisible(true);
               }}
             />
             <StyledLabel> 360 images </StyledLabel>

react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx

@@ -2,7 +2,7 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type ReactElement } from 'react';
+import { useState, type ReactElement } from 'react';
 
 import { useReveal } from '../../RevealContainer/RevealContext';
 import { Checkbox, Flex, Menu } from '@cognite/cogs.js';
@@ -17,6 +17,7 @@ export const PointCloudLayersContainer = ({
   layerProps: Reveal3DResourcesLayersProps;
 }): ReactElement => {
   const viewer = useReveal();
+  const [visible, setVisible] = useState(false);
   const { pointCloudLayerData } = layerProps.reveal3DResourcesLayerData;
   const count = pointCloudLayerData.length.toString();
   const someModelVisible = !pointCloudLayerData.every((data) => !data.isToggled);
@@ -74,14 +75,27 @@ export const PointCloudLayersContainer = ({
   return (
     <>
       {pointCloudLayerData.length > 0 && (
-        <Menu.Submenu openOnHover={false} content={pointCloudModelContent()} title="Point clouds">
-          <Flex direction="row" justifyContent="space-between">
+        <Menu.Submenu
+          appendTo={document.getElementById('reveal-canvas-dom-element') ?? document.body}
+          visible={visible}
+          onClickOutside={() => {
+            setVisible(false);
+          }}
+          content={pointCloudModelContent()}
+          title="Point clouds">
+          <Flex
+            direction="row"
+            justifyContent="space-between"
+            onClick={() => {
+              setVisible((prevState) => !prevState);
+            }}>
             <Checkbox
               checked={someModelVisible}
               indeterminate={indeterminate}
               onChange={(e) => {
                 e.stopPropagation();
                 handleAllPointCloudModelsVisibility(e.target.checked);
+                setVisible(true);
               }}
             />
             <StyledLabel> Point clouds </StyledLabel>