fixed tooltip still active when hovering over child elements

cognitedata · Sep 10, 2024 · b300077 · b300077
1 parent f342b76
commit b300077
Show file tree

Hide file tree

Showing 10 changed files with 208 additions and 207 deletions.
diff --git a/react-components/src/components/Architecture/FilterButton.tsx b/react-components/src/components/Architecture/FilterButton.tsx
@@ -101,40 +101,40 @@ export const FilterButton = ({
     return <></>;
   }
   return (
-    <CogsTooltip
-      content={<LabelWithShortcut label={label} command={command} />}
-      disabled={usedInSettings || label === undefined}
-      appendTo={document.body}
-      placement={placement}>
-      <Dropdown
-        visible={isOpen}
-        hideOnSelect={false}
-        appendTo={'parent'}
-        placement={usedInSettings ? 'bottom-end' : 'auto-start'}
-        content={
-          <div ref={menuRef}>
-            <Menu
-              style={{
-                minWidth: '100px',
-                overflow: 'auto',
-                flexDirection
+    <Dropdown
+      visible={isOpen}
+      hideOnSelect={false}
+      appendTo={'parent'}
+      placement={usedInSettings ? 'bottom-end' : 'auto-start'}
+      content={
+        <div ref={menuRef}>
+          <Menu
+            style={{
+              minWidth: '100px',
+              overflow: 'auto',
+              flexDirection
+            }}>
+            <Menu.Item
+              key={-1}
+              toggled={isAllChecked}
+              onClick={() => {
+                command.toggleAllChecked();
               }}>
-              <Menu.Item
-                key={-1}
-                toggled={isAllChecked}
-                onClick={() => {
-                  command.toggleAllChecked();
-                }}>
-                {BaseFilterCommand.getAllString(t)}
-              </Menu.Item>
-              <StyledMenuItems>
-                {children.map((child, _index): ReactElement => {
-                  return <FilterItem key={child.uniqueId} command={child} />;
-                })}
-              </StyledMenuItems>
-            </Menu>
-          </div>
-        }>
+              {BaseFilterCommand.getAllString(t)}
+            </Menu.Item>
+            <StyledMenuItems>
+              {children.map((child, _index): ReactElement => {
+                return <FilterItem key={child.uniqueId} command={child} />;
+              })}
+            </StyledMenuItems>
+          </Menu>
+        </div>
+      }>
+      <CogsTooltip
+        content={<LabelWithShortcut label={label} command={command} />}
+        disabled={usedInSettings || label === undefined}
+        appendTo={document.body}
+        placement={placement}>
         <Button
           type={usedInSettings ? 'tertiary' : getButtonType(command)}
           icon={usedInSettings ? (isOpen ? 'ChevronUp' : 'ChevronDown') : icon}
@@ -154,8 +154,8 @@ export const FilterButton = ({
           }}>
           {usedInSettings ? selectedLabel : undefined}
         </Button>
-      </Dropdown>
-    </CogsTooltip>
+      </CogsTooltip>
+    </Dropdown>
   );
 };
 

diff --git a/react-components/src/components/Architecture/OptionButton.tsx b/react-components/src/components/Architecture/OptionButton.tsx
@@ -89,30 +89,30 @@ export const OptionButton = ({
   const selectedLabel = command.selectedChild?.getLabel(t);
 
   return (
-    <CogsTooltip
-      content={<LabelWithShortcut label={label} command={command} />}
-      disabled={usedInSettings || label === undefined}
-      appendTo={document.body}
-      placement={placement}>
-      <Dropdown
-        visible={isOpen}
-        hideOnSelect={true}
-        appendTo={'parent'}
-        placement={usedInSettings ? 'bottom-end' : 'auto-start'}
-        content={
-          <div ref={menuRef}>
-            <Menu
-              style={{
-                minWidth: '0px',
-                overflow: 'auto',
-                flexDirection
-              }}>
-              {children.map((child, _index): ReactElement => {
-                return createMenuItem(child, t, postAction);
-              })}
-            </Menu>
-          </div>
-        }>
+    <Dropdown
+      visible={isOpen}
+      hideOnSelect={true}
+      appendTo={'parent'}
+      placement={usedInSettings ? 'bottom-end' : 'auto-start'}
+      content={
+        <div ref={menuRef}>
+          <Menu
+            style={{
+              minWidth: '0px',
+              overflow: 'auto',
+              flexDirection
+            }}>
+            {children.map((child, _index): ReactElement => {
+              return createMenuItem(child, t, postAction);
+            })}
+          </Menu>
+        </div>
+      }>
+      <CogsTooltip
+        content={<LabelWithShortcut label={label} command={command} />}
+        disabled={usedInSettings || label === undefined}
+        appendTo={document.body}
+        placement={placement}>
         <Button
           style={{
             padding: usedInSettings ? DEFAULT_PADDING : '8px 4px',
@@ -132,8 +132,8 @@ export const OptionButton = ({
           }}>
           {selectedLabel}
         </Button>
-      </Dropdown>
-    </CogsTooltip>
+      </CogsTooltip>
+    </Dropdown>
   );
 };
 

diff --git a/react-components/src/components/Architecture/SettingsButton.tsx b/react-components/src/components/Architecture/SettingsButton.tsx
@@ -101,29 +101,29 @@ export const SettingsButton = ({
   const children = command.children;
 
   return (
-    <CogsTooltip
-      content={<LabelWithShortcut label={label} command={command} />}
-      disabled={label === undefined}
-      appendTo={document.body}
-      placement={placement}>
-      <Dropdown
-        visible={isOpen}
-        hideOnSelect={false}
-        appendTo={'parent'}
-        placement="auto-start"
-        content={
-          <div ref={menuRef}>
-            <Menu
-              style={{
-                flexDirection,
-                padding: DEFAULT_PADDING
-              }}>
-              {children.map((child, _index): ReactElement | undefined => {
-                return createMenuItem(child, t);
-              })}
-            </Menu>
-          </div>
-        }>
+    <Dropdown
+      visible={isOpen}
+      hideOnSelect={false}
+      appendTo={'parent'}
+      placement="auto-start"
+      content={
+        <div ref={menuRef}>
+          <Menu
+            style={{
+              flexDirection,
+              padding: DEFAULT_PADDING
+            }}>
+            {children.map((child, _index): ReactElement | undefined => {
+              return createMenuItem(child, t);
+            })}
+          </Menu>
+        </div>
+      }>
+      <CogsTooltip
+        content={<LabelWithShortcut label={label} command={command} />}
+        disabled={label === undefined}
+        appendTo={document.body}
+        placement={placement}>
         <Button
           type={getButtonType(command)}
           icon={icon}
@@ -138,8 +138,8 @@ export const SettingsButton = ({
             setOpen((prevState) => !prevState);
           }}
         />
-      </Dropdown>
-    </CogsTooltip>
+      </CogsTooltip>
+    </Dropdown>
   );
 };
 

diff --git a/react-components/src/components/RevealToolbar/HelpButton.tsx b/react-components/src/components/RevealToolbar/HelpButton.tsx
@@ -20,20 +20,20 @@ export const HelpButton = ({ fallbackLanguage }: HelpButtonProps): ReactElement
   const [helpActive, setHelpActive] = useState<boolean>(false);
 
   return (
-    <CogsTooltip content={t('HELP_TOOLTIP', 'Help')} placement="right" appendTo={document.body}>
-      <Dropdown
-        appendTo={document.body}
-        onClickOutside={() => {
-          setHelpActive(false);
-        }}
-        content={
-          <StyledMenu>
-            <MouseNavigation fallbackLanguage={fallbackLanguage} />
-            <KeyboardNavigation fallbackLanguage={fallbackLanguage} />
-            <TouchNavigation fallbackLanguage={fallbackLanguage} />
-          </StyledMenu>
-        }
-        placement="right">
+    <Dropdown
+      appendTo={document.body}
+      onClickOutside={() => {
+        setHelpActive(false);
+      }}
+      content={
+        <StyledMenu>
+          <MouseNavigation fallbackLanguage={fallbackLanguage} />
+          <KeyboardNavigation fallbackLanguage={fallbackLanguage} />
+          <TouchNavigation fallbackLanguage={fallbackLanguage} />
+        </StyledMenu>
+      }
+      placement="right">
+      <CogsTooltip content={t('HELP_TOOLTIP', 'Help')} placement="right" appendTo={document.body}>
         <Button
           type="ghost"
           icon="Help"
@@ -43,8 +43,8 @@ export const HelpButton = ({ fallbackLanguage }: HelpButtonProps): ReactElement
             setHelpActive((prevState) => !prevState);
           }}
         />
-      </Dropdown>
-    </CogsTooltip>
+      </CogsTooltip>
+    </Dropdown>
   );
 };
 

diff --git a/react-components/src/components/RevealToolbar/LayersButton.tsx b/react-components/src/components/RevealToolbar/LayersButton.tsx
@@ -40,16 +40,16 @@ export const LayersButton = ({
   );
 
   return (
-    <CogsTooltip
-      content={t('LAYERS_FILTER_TOOLTIP', 'Filter 3D resource layers')}
-      placement="right"
-      appendTo={document.body}>
-      <Dropdown
-        appendTo={viewer.domElement ?? document.body}
-        content={<LayersContainer modelHandlers={modelLayerHandlers} update={update} />}
-        placement="right-start">
+    <Dropdown
+      appendTo={viewer.domElement ?? document.body}
+      content={<LayersContainer modelHandlers={modelLayerHandlers} update={update} />}
+      placement="right-start">
+      <CogsTooltip
+        content={t('LAYERS_FILTER_TOOLTIP', 'Filter 3D resource layers')}
+        placement="right"
+        appendTo={document.body}>
         <Button type="ghost" icon="Layers" aria-label="3D Resource layers" />
-      </Dropdown>
-    </CogsTooltip>
+      </CogsTooltip>
+    </Dropdown>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx b/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
@@ -123,51 +123,51 @@ export const RuleBasedOutputsButton = ({
 
   return (
     <>
-      <CogsTooltip
-        content={t('RULESET_SELECT_HEADER', 'Select color overlay')}
-        placement="right"
-        appendTo={document.body}>
-        <Dropdown
-          placement="right-start"
-          disabled={isAssetMappingsLoading}
-          content={
-            <Menu
-              style={{
-                maxHeight: 300,
-                overflow: 'auto',
-                marginBottom: '20px'
-              }}>
-              <Menu.Header>{t('RULESET_SELECT_HEADER', 'Select color overlay')}</Menu.Header>
+      <Dropdown
+        placement="right-start"
+        disabled={isAssetMappingsLoading}
+        content={
+          <Menu
+            style={{
+              maxHeight: 300,
+              overflow: 'auto',
+              marginBottom: '20px'
+            }}>
+            <Menu.Header>{t('RULESET_SELECT_HEADER', 'Select color overlay')}</Menu.Header>
+            <RuleBasedSelectionItem
+              key="no-rule-selected"
+              id="no-rule-selected"
+              label={t('RULESET_NO_SELECTION', 'No RuleSet selected')}
+              checked={currentRuleSetEnabled === undefined || emptyRuleSelected?.isEnabled}
+              onChange={onChange}
+              isLoading={isRuleLoading}
+              isEmptyRuleItem={true}
+            />
+            {ruleInstances?.map((item) => (
               <RuleBasedSelectionItem
-                key="no-rule-selected"
-                id="no-rule-selected"
-                label={t('RULESET_NO_SELECTION', 'No RuleSet selected')}
-                checked={currentRuleSetEnabled === undefined || emptyRuleSelected?.isEnabled}
+                key={item?.rule?.properties.id}
+                id={item?.rule?.properties.id}
+                label={item?.rule?.properties.name}
+                checked={item?.isEnabled}
                 onChange={onChange}
                 isLoading={isRuleLoading}
-                isEmptyRuleItem={true}
+                isEmptyRuleItem={false}
               />
-              {ruleInstances?.map((item) => (
-                <RuleBasedSelectionItem
-                  key={item?.rule?.properties.id}
-                  id={item?.rule?.properties.id}
-                  label={item?.rule?.properties.name}
-                  checked={item?.isEnabled}
-                  onChange={onChange}
-                  isLoading={isRuleLoading}
-                  isEmptyRuleItem={false}
-                />
-              ))}
-            </Menu>
-          }>
+            ))}
+          </Menu>
+        }>
+        <CogsTooltip
+          content={t('RULESET_SELECT_HEADER', 'Select color overlay')}
+          placement="right"
+          appendTo={document.body}>
           <Button
             disabled={isAssetMappingsLoading}
             icon="ColorPalette"
             aria-label="Select RuleSet"
             type="ghost"
           />
-        </Dropdown>
-      </CogsTooltip>
+        </CogsTooltip>
+      </Dropdown>
       {ruleInstances !== undefined && ruleInstances?.length > 0 && (
         <RuleBasedOutputsSelector
           onRuleSetChanged={ruleSetStylingChanged}