diff --git a/packages/react/src/components/OptionsMenu/OptionsMenu.test.tsx b/packages/react/src/components/OptionsMenu/OptionsMenu.test.tsx index 5f100b004..3ebf796e5 100644 --- 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 () => { ); - 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 index 1072c6dca..8efb3fd29 100644 --- 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 })} { if (menuRef) { diff --git a/packages/react/src/components/OptionsMenu/OptionsMenuList.tsx b/packages/react/src/components/OptionsMenu/OptionsMenuList.tsx index 82f7c8fba..ee63ddf8e 100644 --- a/packages/react/src/components/OptionsMenu/OptionsMenuList.tsx +++ b/packages/react/src/components/OptionsMenu/OptionsMenuList.tsx @@ -9,6 +9,7 @@ const [up, down, tab, enter, space, esc] = [38, 40, 9, 13, 32, 27]; export interface OptionsMenuListProps extends Omit { className?: string; + triggerRef: React.RefObject; } const OptionsMenuList = ({ @@ -16,6 +17,7 @@ const OptionsMenuList = ({ 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(); }