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 = (