diff --git a/packages/menu/src/MenuContainer.spec.tsx b/packages/menu/src/MenuContainer.spec.tsx index b36372456..58eee910f 100644 --- a/packages/menu/src/MenuContainer.spec.tsx +++ b/packages/menu/src/MenuContainer.spec.tsx @@ -251,6 +251,23 @@ describe('MenuContainer', () => { expect(menu).not.toBeVisible(); }); + it('prevents menu click propagation', async () => { + const handleClick = jest.fn(); + const { getByTestId } = render( + // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions +
+ +
+ ); + const menu = getByTestId('menu'); + + await act(async () => { + await user.click(menu); + }); + + expect(handleClick).not.toHaveBeenCalled(); + }); + it('closes the menu on blur due to a body click, returns focus to the trigger the first time, and focuses the body on following clicks.', async () => { const { getByTestId } = render(); const trigger = getByTestId('trigger'); diff --git a/packages/menu/src/useMenu.ts b/packages/menu/src/useMenu.ts index 178256563..e3188672c 100644 --- a/packages/menu/src/useMenu.ts +++ b/packages/menu/src/useMenu.ts @@ -365,6 +365,11 @@ export const useMenu = { + // Prevent propagation to container; for example, accordion header expand/collapse + event.stopPropagation(); + }, []); + const handleMenuKeyDown = useCallback( (event: KeyboardEvent) => { const { key } = event; @@ -776,7 +781,7 @@ export const useMenu = ( - ({ role = 'menu', onBlur, onMouseLeave, ...other } = {}) => ({ + ({ role = 'menu', onBlur, onClick, onMouseLeave, ...other } = {}) => ({ ...other, ...getGroupProps({ onMouseLeave: composeEventHandlers(onMouseLeave, handleMenuMouseLeave) @@ -787,9 +792,10 @@ export const useMenu = (