feat: close submenu if another submenu is opened (#911)

app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx

@@ -15,12 +15,12 @@ import {
   calculateSubmenuStyle,
   SubmenuStyle,
 } from '@/utils/calculateSubmenuStyle';
+import { useCloseOnBlur } from '../utils';
 
 type ChangeEditorOptionProps = {
   appState: AppState;
   application: WebApplication;
   note: SNNote;
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
 };
 
 type AccordionMenuGroup<T> = {
@@ -40,7 +40,6 @@ export type EditorMenuGroup = AccordionMenuGroup<EditorMenuItem>;
 
 export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
   application,
-  closeOnBlur,
   note,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -50,9 +49,15 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
     bottom: 0,
     maxHeight: 'auto',
   });
+  const menuContainerRef = useRef<HTMLDivElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
 
+  const [closeOnBlur] = useCloseOnBlur(menuContainerRef, (open: boolean) => {
+    setIsOpen(open);
+    setIsVisible(open);
+  });
+
   const toggleChangeEditorMenu = () => {
     if (!isOpen) {
       const menuStyle = calculateSubmenuStyle(buttonRef.current);
@@ -81,49 +86,51 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
   }, [isOpen]);
 
   return (
-    <Disclosure open={isOpen} onChange={toggleChangeEditorMenu}>
-      <DisclosureButton
-        onKeyDown={(event) => {
-          if (event.key === KeyboardKey.Escape) {
-            setIsOpen(false);
-          }
-        }}
-        onBlur={closeOnBlur}
-        ref={buttonRef}
-        className="sn-dropdown-item justify-between"
-      >
-        <div className="flex items-center">
-          <Icon type="dashboard" className="color-neutral mr-2" />
-          Change editor
-        </div>
-        <Icon type="chevron-right" className="color-neutral" />
-      </DisclosureButton>
-      <DisclosurePanel
-        ref={menuRef}
-        onKeyDown={(event) => {
-          if (event.key === KeyboardKey.Escape) {
-            setIsOpen(false);
-            buttonRef.current?.focus();
-          }
-        }}
-        style={{
-          ...menuStyle,
-          position: 'fixed',
-        }}
-        className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
-      >
-        {isOpen && (
-          <ChangeEditorMenu
-            application={application}
-            closeOnBlur={closeOnBlur}
-            note={note}
-            isVisible={isVisible}
-            closeMenu={() => {
+    <div ref={menuContainerRef}>
+      <Disclosure open={isOpen} onChange={toggleChangeEditorMenu}>
+        <DisclosureButton
+          onKeyDown={(event) => {
+            if (event.key === KeyboardKey.Escape) {
               setIsOpen(false);
-            }}
-          />
-        )}
-      </DisclosurePanel>
-    </Disclosure>
+            }
+          }}
+          onBlur={closeOnBlur}
+          ref={buttonRef}
+          className="sn-dropdown-item justify-between"
+        >
+          <div className="flex items-center">
+            <Icon type="dashboard" className="color-neutral mr-2" />
+            Change editor
+          </div>
+          <Icon type="chevron-right" className="color-neutral" />
+        </DisclosureButton>
+        <DisclosurePanel
+          ref={menuRef}
+          onKeyDown={(event) => {
+            if (event.key === KeyboardKey.Escape) {
+              setIsOpen(false);
+              buttonRef.current?.focus();
+            }
+          }}
+          style={{
+            ...menuStyle,
+            position: 'fixed',
+          }}
+          className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
+        >
+          {isOpen && (
+            <ChangeEditorMenu
+              application={application}
+              closeOnBlur={closeOnBlur}
+              note={note}
+              isVisible={isVisible}
+              closeMenu={() => {
+                setIsOpen(false);
+              }}
+            />
+          )}
+        </DisclosurePanel>
+      </Disclosure>
+    </div>
   );
 };