fix(menu): prevent click propagation to container components (#703)

Author: jzempel

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
+        <div onClick={handleClick}>
+          <TestMenu items={ITEMS} />
+        </div>
+      );
+      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(<TestMenu items={ITEMS} />);
       const trigger = getByTestId('trigger');

packages/menu/src/useMenu.ts

@@ -365,6 +365,11 @@ export const useMenu = <T extends HTMLElement = HTMLElement, M extends HTMLEleme
     ]
   );
 
+  const handleMenuClick = useCallback((event: React.MouseEvent) => {
+    // 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 = <T extends HTMLElement = HTMLElement, M extends HTMLEleme
   );
 
   const getMenuProps = useCallback<IUseMenuReturnValue['getMenuProps']>(
-    ({ role = 'menu', onBlur, onMouseLeave, ...other } = {}) => ({
+    ({ role = 'menu', onBlur, onClick, onMouseLeave, ...other } = {}) => ({
       ...other,
       ...getGroupProps({
         onMouseLeave: composeEventHandlers(onMouseLeave, handleMenuMouseLeave)
@@ -787,9 +792,10 @@ export const useMenu = <T extends HTMLElement = HTMLElement, M extends HTMLEleme
       tabIndex: -1,
       role: role === null ? undefined : role,
       ref: menuRef as any,
-      onBlur: composeEventHandlers(onBlur, handleBlur)
+      onBlur: composeEventHandlers(onBlur, handleBlur),
+      onClick: composeEventHandlers(onClick, handleMenuClick)
     }),
-    [getGroupProps, handleBlur, handleMenuMouseLeave, menuRef, triggerId]
+    [getGroupProps, handleBlur, handleMenuClick, handleMenuMouseLeave, menuRef, triggerId]
   );
 
   const getSeparatorProps = useCallback<IUseMenuReturnValue['getSeparatorProps']>(