fix: close the options menu if clicking on trigger

dequelabs · Oct 3, 2024 · bd25a61 · bd25a61
1 parent 952d674
commit bd25a61
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/packages/react/src/components/OptionsMenu/OptionsMenu.test.tsx b/packages/react/src/components/OptionsMenu/OptionsMenu.test.tsx
@@ -113,7 +113,7 @@ test('should toggle menu on trigger clicks', async () => {
     </OptionsMenu>
   );
 
-  const button = screen.getByRole('button');
+  const button = screen.getByRole('button', { name: 'trigger' });
 
   await user.click(button);
   expect(button).toHaveAttribute('aria-expanded', 'true');

diff --git a/packages/react/src/components/OptionsMenu/OptionsMenu.tsx b/packages/react/src/components/OptionsMenu/OptionsMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef } from 'react';
 import OptionsMenuWrapper from './OptionsMenuWrapper';
 import OptionsMenuList from './OptionsMenuList';
 import setRef from '../../utils/setRef';
@@ -73,6 +73,7 @@ const OptionsMenu = ({
           onKeyDown: handleTriggerKeyDown
         })}
       <OptionsMenuList
+        triggerRef={triggerRef}
         show={show}
         menuRef={(el) => {
           if (menuRef) {

diff --git a/packages/react/src/components/OptionsMenu/OptionsMenuList.tsx b/packages/react/src/components/OptionsMenu/OptionsMenuList.tsx
@@ -9,13 +9,15 @@ const [up, down, tab, enter, space, esc] = [38, 40, 9, 13, 32, 27];
 export interface OptionsMenuListProps
   extends Omit<OptionsMenuProps, 'trigger'> {
   className?: string;
+  triggerRef: React.RefObject<HTMLButtonElement>;
 }
 
 const OptionsMenuList = ({
   children,
   menuRef,
   show,
   className,
+  triggerRef,
   onClose = () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
   onSelect = () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
   closeOnSelect = true,
@@ -96,6 +98,11 @@ const OptionsMenuList = ({
   };
 
   const handleClickOutside = (e: MouseEvent | TouchEvent) => {
+    const target = e.target as Node;
+    const triggerElement = triggerRef.current;
+    if (target === triggerElement || triggerElement?.contains(target)) {
+      return;
+    }
     if (show) {
       onClose();
     }