Menu trigger=click-hover updates for UX and accessibility

packages/@docs/demos/src/demos/core/Menu/Menu.demo.navigation.tsx

@@ -4,17 +4,25 @@ import { MantineDemo } from '@mantinex/demo';
 import { DemoMenuItems } from './_menu-items';
 
 const code = `
-import { Menu, Group } from '@mantine/core';
+import { Group, Menu } from '@mantine/core';
 
 function Demo() {
   return (
     <Group>
-      <Menu trigger="click-hover" loop={false} withinPortal={false} trapFocus={false} menuItemTabIndex={0}>
-        {/* ... menu items */}
-      </Menu>
-      <Menu trigger="click-hover" loop={false} withinPortal={false} trapFocus={false} menuItemTabIndex={0}>
-        {/* ... menu items */}
-      </Menu>
+      {Array(4)
+        .fill(0)
+        .map((e, i) => (
+          <Menu
+            key={i}
+            trigger="click-hover"
+            loop={false}
+            withinPortal={false}
+            trapFocus={false}
+            menuItemTabIndex={0}
+          >
+            <DemoMenuItems />
+          </Menu>
+        ))}
     </Group>
   );
 }
@@ -23,24 +31,20 @@ function Demo() {
 function Demo() {
   return (
     <Group>
-      <Menu
-        trigger="click-hover"
-        loop={false}
-        withinPortal={false}
-        trapFocus={false}
-        menuItemTabIndex={0}
-      >
-        <DemoMenuItems />
-      </Menu>
-      <Menu
-        trigger="click-hover"
-        loop={false}
-        withinPortal={false}
-        trapFocus={false}
-        menuItemTabIndex={0}
-      >
-        <DemoMenuItems />
-      </Menu>
+      {Array(4)
+        .fill(0)
+        .map((e, i) => (
+          <Menu
+            key={i}
+            trigger="click-hover"
+            loop={false}
+            withinPortal={false}
+            trapFocus={false}
+            menuItemTabIndex={0}
+          >
+            <DemoMenuItems />
+          </Menu>
+        ))}
     </Group>
   );
 }

packages/@mantine/core/src/components/Menu/Menu.context.ts

@@ -16,6 +16,8 @@ interface MenuContext {
   unstyled: boolean | undefined;
   getStyles: GetStylesApi<MenuFactory>;
   menuItemTabIndex: -1 | 0 | undefined;
+  openedViaClick: boolean;
+  setOpenedViaClick: (value: boolean) => void;
 }
 
 export const [MenuContextProvider, useMenuContext] = createSafeContext<MenuContext>(

packages/@mantine/core/src/components/Menu/Menu.test.tsx

@@ -65,10 +65,8 @@ describe('@mantine/core/Menu', () => {
 
   it('toggles menu when target is clicked when trigger="click"', async () => {
     render(<TestContainer />);
-
     expectClosed();
     await userEvent.click(getControl());
-
     expectOpened();
     await userEvent.click(getControl());
     expectClosed();
@@ -77,14 +75,34 @@ describe('@mantine/core/Menu', () => {
   it('toggles menu when target is hovered when trigger="hover"', async () => {
     render(<TestContainer trigger="hover" />);
     expectClosed();
-
     await userEvent.hover(getControl());
     expectOpened();
+    await userEvent.unhover(getControl());
+    expectClosed();
+  });
 
+  it('toggles menu when target is hovered when trigger="click-hover"', async () => {
+    render(<TestContainer trigger="click-hover" />);
+    expectClosed();
+    await userEvent.hover(getControl());
+    expectOpened();
     await userEvent.unhover(getControl());
     expectClosed();
   });
 
+  it('menu always stays open when target is clicked when trigger="click-hover"', async () => {
+    render(<TestContainer trigger="click-hover" />);
+    expectClosed();
+    await userEvent.click(getControl());
+    expectOpened();
+    await userEvent.click(getControl());
+    expectOpened();
+    await userEvent.hover(getControl());
+    expectOpened();
+    await userEvent.unhover(getControl());
+    expectOpened();
+  });
+
   it('supports defaultOpened prop', () => {
     render(<TestContainer defaultOpened />);
     expectOpened();

packages/@mantine/core/src/components/Menu/Menu.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDidUpdate, useUncontrolled } from '@mantine/hooks';
 import {
   ExtendComponent,
@@ -141,9 +141,11 @@ export function Menu(_props: MenuProps) {
     finalValue: false,
     onChange,
   });
+  const [openedViaClick, setOpenedViaClick] = useState(false);
 
   const close = () => {
     setOpened(false);
+    setOpenedViaClick(false);
     _opened && onClose?.();
   };
 
@@ -180,6 +182,8 @@ export function Menu(_props: MenuProps) {
         getItemIndex,
         hovered,
         setHovered,
+        openedViaClick,
+        setOpenedViaClick,
         closeOnItemClick,
         closeDropdown: trigger === 'click' ? close : closeDropdown,
         openDropdown: trigger === 'click' ? open : openDropdown,

packages/@mantine/core/src/components/Menu/MenuTarget/MenuTarget.tsx

@@ -26,20 +26,29 @@ export const MenuTarget = forwardRef<HTMLElement, MenuTargetProps>((props, ref)
 
   const ctx = useMenuContext();
 
-  const onClick = createEventHandler(
-    children.props.onClick,
-    () => (ctx.trigger === 'click' || ctx.trigger === 'click-hover') && ctx.toggleDropdown()
-  );
+  const onClick = createEventHandler(children.props.onClick, () => {
+    if (ctx.trigger === 'click') {
+      ctx.toggleDropdown();
+    } else if (ctx.trigger === 'click-hover') {
+      ctx.setOpenedViaClick(true);
+      if (!ctx.opened) {
+        ctx.openDropdown();
+      }
+    }
+  });
 
   const onMouseEnter = createEventHandler(
     children.props.onMouseEnter,
     () => (ctx.trigger === 'hover' || ctx.trigger === 'click-hover') && ctx.openDropdown()
   );
 
-  const onMouseLeave = createEventHandler(
-    children.props.onMouseLeave,
-    () => (ctx.trigger === 'hover' || ctx.trigger === 'click-hover') && ctx.closeDropdown()
-  );
+  const onMouseLeave = createEventHandler(children.props.onMouseLeave, () => {
+    if (ctx.trigger === 'hover') {
+      ctx.closeDropdown();
+    } else if (ctx.trigger === 'click-hover' && !ctx.openedViaClick) {
+      ctx.closeDropdown();
+    }
+  });
 
   return (
     <Popover.Target refProp={refProp} popupType="menu" ref={ref} {...others}>