[Menu] Fixed Menu item not toggling highlighted prop when submenu popup is opened using keyboard

packages/react/src/menu/checkbox-item/MenuCheckboxItem.test.tsx

@@ -12,6 +12,7 @@ const testRootContext: MenuRootContext = {
   getPopupProps: (p) => ({ ...p }),
   getTriggerProps: (p) => ({ ...p }),
   getItemProps: (p) => ({ ...p }),
+  setActiveIndex: () => {},
   parentContext: undefined,
   nested: false,
   setTriggerElement: () => {},

packages/react/src/menu/item/MenuItem.test.tsx

@@ -13,6 +13,7 @@ const testRootContext: MenuRootContext = {
   getPopupProps: (p) => ({ ...p }),
   getTriggerProps: (p) => ({ ...p }),
   getItemProps: (p) => ({ ...p }),
+  setActiveIndex: () => {},
   parentContext: undefined,
   nested: false,
   setTriggerElement: () => {},

packages/react/src/menu/positioner/MenuPositioner.test.tsx

@@ -12,6 +12,7 @@ const testRootContext: MenuRootContext = {
   getPopupProps: (p) => ({ ...p }),
   getTriggerProps: (p) => ({ ...p }),
   getItemProps: (p) => ({ ...p }),
+  setActiveIndex: () => {},
   parentContext: undefined,
   nested: false,
   setTriggerElement: () => {},

packages/react/src/menu/radio-item/MenuRadioItem.test.tsx

@@ -13,6 +13,7 @@ const testRootContext: MenuRootContext = {
   getPopupProps: (p) => ({ ...p }),
   getTriggerProps: (p) => ({ ...p }),
   getItemProps: (p) => ({ ...p }),
+  setActiveIndex: () => {},
   parentContext: undefined,
   nested: false,
   setTriggerElement: () => {},

packages/react/src/menu/root/MenuRoot.tsx

@@ -61,6 +61,7 @@ const MenuRoot: React.FC<MenuRoot.Props> = function MenuRoot(props) {
       ...menuRoot,
       nested,
       parentContext,
+      setActiveIndex: menuRoot.setActiveIndex,
       disabled,
       allowMouseUpTriggerRef:
         parentContext?.allowMouseUpTriggerRef ?? menuRoot.allowMouseUpTriggerRef,

packages/react/src/menu/root/useMenuRoot.ts

@@ -177,6 +177,7 @@ export function useMenuRoot(parameters: useMenuRoot.Parameters): useMenuRoot.Ret
     () => ({
       activeIndex,
       allowMouseUpTriggerRef,
+      setActiveIndex,
       floatingRootContext,
       getItemProps,
       getPopupProps,
@@ -194,6 +195,7 @@ export function useMenuRoot(parameters: useMenuRoot.Parameters): useMenuRoot.Ret
     }),
     [
       activeIndex,
+      setActiveIndex,
       floatingRootContext,
       getItemProps,
       getPopupProps,
@@ -274,6 +276,7 @@ export namespace useMenuRoot {
 
   export interface ReturnValue {
     activeIndex: number | null;
+    setActiveIndex: (index: number | null) => void;
     floatingRootContext: FloatingRootContext;
     getItemProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
     getPopupProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;

packages/react/src/menu/submenu-trigger/MenuSubmenuTrigger.tsx

@@ -37,15 +37,14 @@ const MenuSubmenuTrigger = React.forwardRef(function SubmenuTriggerComponent(
     throw new Error('Base UI: ItemTrigger must be placed in a nested Menu.');
   }
 
-  const { activeIndex, getItemProps } = parentContext;
+  const { activeIndex, getItemProps, setActiveIndex } = parentContext;
   const item = useCompositeListItem();
 
   const highlighted = activeIndex === item.index;
 
   const mergedRef = useForkRef(forwardedRef, item.ref);
 
   const { events: menuEvents } = useFloatingTree()!;
-
   const { getRootProps } = useMenuSubmenuTrigger({
     id,
     highlighted,
@@ -55,6 +54,7 @@ const MenuSubmenuTrigger = React.forwardRef(function SubmenuTriggerComponent(
     setTriggerElement,
     allowMouseUpTriggerRef,
     typingRef,
+    setActiveIndex,
   });
 
   const state: MenuSubmenuTrigger.State = React.useMemo(

packages/react/src/menu/submenu-trigger/useMenuSubmenuTrigger.ts

@@ -4,6 +4,11 @@ import { FloatingEvents } from '@floating-ui/react';
 import { useMenuItem } from '../item/useMenuItem';
 import { useForkRef } from '../../utils/useForkRef';
 import { GenericHTMLProps } from '../../utils/types';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+
+type MenuKeyboardEvent = {
+  key: 'ArrowRight' | 'ArrowLeft' | 'ArrowUp' | 'ArrowDown';
+} & React.KeyboardEvent;
 
 export function useMenuSubmenuTrigger(
   parameters: useSubmenuTrigger.Parameters,
@@ -17,6 +22,9 @@ export function useMenuSubmenuTrigger(
     setTriggerElement,
     allowMouseUpTriggerRef,
     typingRef,
+    onKeyDown,
+    setActiveIndex,
+    onClick,
   } = parameters;
 
   const { getRootProps: getMenuItemProps, rootRef: menuItemRef } = useMenuItem({
@@ -34,15 +42,28 @@ export function useMenuSubmenuTrigger(
 
   const getRootProps = React.useCallback(
     (externalProps?: GenericHTMLProps) => {
-      return {
+      return mergeReactProps(externalProps, {
         ...getMenuItemProps({
           'aria-haspopup': 'menu' as const,
-          ...externalProps,
+          onKeyDown: (event: MenuKeyboardEvent) => {
+            if (event.key === 'ArrowRight' && highlighted) {
+              // Clear parent menu's highlight state when entering submenu
+              // This prevents multiple highlighted items across menu levels
+              setActiveIndex(null);
+            }
+            onKeyDown?.(event);
+          },
+          onClick: (event: React.MouseEvent) => {
+            if (highlighted) {
+              setActiveIndex(null);
+            }
+            onClick?.(event);
+          },
         }),
         ref: menuTriggerRef,
-      };
+      });
     },
-    [getMenuItemProps, menuTriggerRef],
+    [getMenuItemProps, menuTriggerRef, onKeyDown, onClick, highlighted, setActiveIndex],
   );
 
   return React.useMemo(
@@ -82,6 +103,21 @@ export namespace useSubmenuTrigger {
      * A ref that is set to `true` when the user is using the typeahead feature.
      */
     typingRef: React.RefObject<boolean>;
+    /**
+     * Callback function that is triggered on key down events.
+     * @param event - The keyboard event that triggered the callback.
+     */
+    onKeyDown?: (event: MenuKeyboardEvent) => void;
+    /**
+     * Callback function that is triggered on click events.
+     * @param event - The click event that triggered the callback.
+     */
+    onClick?: (event: React.MouseEvent) => void;
+    /**
+     * Callback to update the active (highlighted) item index.
+     * Set to null to remove highlighting from all items.
+     */
+    setActiveIndex: (index: number | null) => void;
   }
 
   export interface ReturnValue {

packages/react/src/menu/trigger/MenuTrigger.test.tsx

@@ -12,6 +12,7 @@ const testRootContext: MenuRootContext = {
   getPopupProps: (p) => ({ ...p }),
   getTriggerProps: (p) => ({ ...p }),
   getItemProps: (p) => ({ ...p }),
+  setActiveIndex: () => {},
   parentContext: undefined,
   nested: false,
   setTriggerElement: () => {},