fix: Make submenu hover focus remain on the trigger and collapse submenus when hovering root menu (#8666)

* fix: hovering submenutrigger should keep focus on the trigger

also makes it so ArrowRight still moves to the submenu after hovering, not sure if this breaks VO moving focus to the dismiss button though...

* make submenu close if any other item in the same menu is focused

this fixes the case where the user hovers a root menu level item when there are multiple submenu levels open but only the last one closes

Author: LFDanLu

packages/@react-aria/menu/src/useSubmenuTrigger.ts

@@ -14,7 +14,7 @@ import {AriaMenuItemProps} from './useMenuItem';
 import {AriaMenuOptions} from './useMenu';
 import type {AriaPopoverProps, OverlayProps} from '@react-aria/overlays';
 import {FocusableElement, FocusStrategy, KeyboardEvent, Node, PressEvent, RefObject} from '@react-types/shared';
-import {focusWithoutScrolling, useEffectEvent, useId, useLayoutEffect} from '@react-aria/utils';
+import {focusWithoutScrolling, useEffectEvent, useEvent, useId, useLayoutEffect} from '@react-aria/utils';
 import type {SubmenuTriggerState} from '@react-stately/menu';
 import {useCallback, useRef} from 'react';
 import {useLocale} from '@react-aria/i18n';
@@ -223,11 +223,13 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
     }
   };
 
-  let onBlur = (e) => {
-    if (state.isOpen && (parentMenuRef.current?.contains(e.relatedTarget))) {
+  useEvent(parentMenuRef, 'focusin', (e) => {
+    // If we detect focus moved to a different item in the same menu that the currently open submenu trigger is in
+    // then close the submenu. This is for a case where the user hovers a root menu item when multiple submenus are open
+    if (state.isOpen && (parentMenuRef.current?.contains(e.target as HTMLElement) && e.target !== ref.current)) {
       onSubmenuClose();
     }
-  };
+  });
 
   let shouldCloseOnInteractOutside = (target) => {
     if (target !== ref.current) {
@@ -249,7 +251,6 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
       onPress,
       onHoverChange,
       onKeyDown: submenuTriggerKeyDown,
-      onBlur,
       isOpen: state.isOpen
     },
     submenuProps,

packages/react-aria-components/src/Menu.tsx

@@ -131,10 +131,12 @@ export const SubmenuTrigger =  /*#__PURE__*/ createBranchComponent('submenutrigg
     <Provider
       values={[
         [MenuItemContext, {...submenuTriggerProps, onAction: undefined, ref: itemRef}],
-        [MenuContext, submenuProps],
+        [MenuContext, {
+          ref: submenuRef,
+          ...submenuProps
+        }],
         [OverlayTriggerStateContext, submenuTriggerState],
         [PopoverContext, {
-          ref: submenuRef,
           trigger: 'SubmenuTrigger',
           triggerRef: itemRef,
           placement: 'end top',

packages/react-aria-components/src/Popover.tsx

@@ -190,11 +190,12 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, clearContexts
   }, [ref, shouldBeDialog]);
 
   // Focus the popover itself on mount, unless a child element is already focused.
+  // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger
   useEffect(() => {
-    if (isDialog && ref.current && !ref.current.contains(document.activeElement)) {
+    if (isDialog && props.trigger !== 'SubmenuTrigger' && ref.current && !ref.current.contains(document.activeElement)) {
       focusSafely(ref.current);
     }
-  }, [isDialog, ref]);
+  }, [isDialog, ref, props.trigger]);
 
   let children = useMemo(() => {
     let children = renderProps.children;

packages/react-aria-components/test/AriaMenu.test-util.tsx

@@ -693,6 +693,43 @@ export const AriaMenuTests = ({renderers, setup, prefix}: AriaMenuTestProps): vo
           expect(nestedSubmenu).not.toBeInTheDocument();
           expect(document.activeElement).toBe(nestedSubmenuTrigger);
         });
+
+        it('should close the submenu if another item in the same menu is focused', async () => {
+          let tree = (renderers.submenus!)();
+          let menuTester = testUtilUser.createTester('Menu', {user, root: tree.container});
+          await menuTester.open();
+          let menu = menuTester.menu;
+          let submenuTrigger = menuTester.submenuTriggers[0];
+          let submenuUtil = (await menuTester.openSubmenu({submenuTrigger}))!;
+          act(() => {jest.runAllTimers();});
+          let submenu = submenuUtil.menu;
+          expect(submenu).toBeInTheDocument();
+          let nestedSubmenuTrigger = submenuUtil.submenuTriggers[0];
+          let nestedSubmenuUtil = (await submenuUtil.openSubmenu({submenuTrigger: nestedSubmenuTrigger}))!;
+          act(() => {jest.runAllTimers();});
+          let nestedSubmenu = nestedSubmenuUtil.menu;
+          expect(submenu).toBeInTheDocument();
+          await user.hover(menuTester.options()[0]);
+          act(() => {jest.runAllTimers();});
+          expect(nestedSubmenu).not.toBeInTheDocument();
+          expect(submenu).not.toBeInTheDocument();
+          expect(menu).toBeInTheDocument();
+        });
+
+        it('should retain focus on the submenu trigger when hovering it', async () => {
+          let tree = (renderers.submenus!)();
+          let menuTester = testUtilUser.createTester('Menu', {user, root: tree.container});
+          await menuTester.open();
+          await user.hover(menuTester.submenuTriggers[0]);
+          act(() => {jest.runAllTimers();});
+          expect(menuTester.submenuTriggers[0]).toHaveAttribute('aria-expanded', 'true');
+          expect(document.activeElement).toBe(menuTester.submenuTriggers[0]);
+
+          // It should also allow the user to move focus into the submenu via ArrowRight
+          await user.keyboard('{ArrowRight}');
+          let submenu = tree.getAllByRole('menu')[1];
+          expect(document.activeElement).toBe(within(submenu).getAllByRole('menuitem')[0]);
+        });
       });
     }