Fix issue with outside click of the settings menu

cognitedata · Aug 27, 2024 · 67254e8 · 67254e8
1 parent 2b2556d
commit 67254e8
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 15 deletions.
diff --git a/react-components/src/components/Architecture/FilterButton.tsx b/react-components/src/components/Architecture/FilterButton.tsx
@@ -108,7 +108,7 @@ export const FilterButton = ({
       <Dropdown
         visible={isOpen}
         hideOnSelect={false}
-        appendTo={document.body}
+        appendTo={'parent'}
         placement={usedInSettings ? 'bottom-end' : 'auto-start'}
         content={
           <div ref={menuRef}>

diff --git a/react-components/src/components/Architecture/OptionButton.tsx b/react-components/src/components/Architecture/OptionButton.tsx
@@ -96,7 +96,7 @@ export const OptionButton = ({
       <Dropdown
         visible={isOpen}
         hideOnSelect={true}
-        appendTo={document.body}
+        appendTo={'parent'}
         placement={usedInSettings ? 'bottom-end' : 'auto-start'}
         content={
           <div ref={menuRef}>

diff --git a/react-components/src/components/Architecture/SettingsButton.tsx b/react-components/src/components/Architecture/SettingsButton.tsx
@@ -2,7 +2,15 @@
  * Copyright 2024 Cognite AS
  */
 
-import { useCallback, useEffect, useMemo, useState, type ReactElement } from 'react';
+import {
+  type MouseEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement
+} from 'react';
 import {
   Button,
   Dropdown,
@@ -30,6 +38,7 @@ import { OptionButton } from './OptionButton';
 import { BaseSliderCommand } from '../../architecture/base/commands/BaseSliderCommand';
 import { BaseFilterCommand } from '../../architecture/base/commands/BaseFilterCommand';
 import { FilterButton } from './FilterButton';
+import { useClickOutside } from './useClickOutside';
 
 export const SettingsButton = ({
   inputCommand,
@@ -66,6 +75,22 @@ export const SettingsButton = ({
     };
   }, [command]);
 
+  const outsideAction = (): boolean => {
+    if (!isOpen) {
+      return false;
+    }
+    postAction();
+    return false;
+  };
+
+  const postAction = (): void => {
+    setOpen(false);
+    renderTarget.domElement.focus();
+  };
+
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  useClickOutside(menuRef, outsideAction);
+
   if (!isVisible || !command.hasChildren) {
     return <></>;
   }
@@ -83,18 +108,20 @@ export const SettingsButton = ({
       <Dropdown
         visible={isOpen}
         hideOnSelect={false}
-        appendTo={document.body}
+        appendTo={'parent'}
         placement="auto-start"
         content={
-          <Menu
-            style={{
-              flexDirection,
-              padding: '4px 4px'
-            }}>
-            {children.map((child, _index): ReactElement | undefined => {
-              return createMenuItem(child, t);
-            })}
-          </Menu>
+          <div ref={menuRef}>
+            <Menu
+              style={{
+                flexDirection,
+                padding: '4px 4px'
+              }}>
+              {children.map((child, _index): ReactElement | undefined => {
+                return createMenuItem(child, t);
+              })}
+            </Menu>
+          </div>
         }>
         <Button
           type={getButtonType(command)}
@@ -104,7 +131,9 @@ export const SettingsButton = ({
           toggled={isOpen}
           aria-label={label}
           iconPlacement="right"
-          onClick={() => {
+          onClick={(event: MouseEvent<HTMLElement>) => {
+            event.stopPropagation();
+            event.preventDefault();
             setOpen((prevState) => !prevState);
           }}
         />

diff --git a/react-components/src/components/Architecture/useClickOutside.tsx b/react-components/src/components/Architecture/useClickOutside.tsx
@@ -8,7 +8,8 @@ export function useClickOutside(ref: RefObject<HTMLElement>, callback: () => boo
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent): void => {
       const current = ref.current;
-      if (current !== null && !current.contains(event.target as Node)) {
+      const target = event.target as Node;
+      if (current !== null && !current.contains(target)) {
         if (callback()) {
           event.stopPropagation();
           event.preventDefault();