fix(MenuList): Removing ignoreKeydown from MenuList. (#31393)

MenuList had ignoreKeydown for Tab to prevent Tabster from handling the Tab press. As a side effect this ignoreKeydown was affecting submenus too. This PR uses TabsterMoveFocusEvent to prevent Tabster from handling the Tab press in a particular case that doesn't affect submenus.

change/@fluentui-react-menu-6f394e3c-789d-463b-9292-34fbdddb0970.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Removing ignoreKeydown on MenuList as it has side effect on submenus.",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabster-801c3f1f-2eb1-4c83-91fa-19a5893454ed.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Exposing TabsterMoveFocusEvent.",
+  "packageName": "@fluentui/react-tabster",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-menu/library/src/components/MenuList/__snapshots__/MenuList.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`MenuList renders a default state 1`] = `
 <div
   aria-labelledby=""
   className="fui-MenuList"
-  data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":1,\\"memorizeCurrent\\":true},\\"focusable\\":{\\"ignoreKeydown\\":{\\"Tab\\":false}}}"
+  data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":1,\\"memorizeCurrent\\":true}}"
   role="menu"
 >
   Default MenuList

packages/react-components/react-menu/library/src/components/MenuList/useMenuList.ts

@@ -6,7 +6,13 @@ import {
   getIntrinsicElementProps,
   slot,
 } from '@fluentui/react-utilities';
-import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
+import {
+  useArrowNavigationGroup,
+  useFocusFinders,
+  TabsterMoveFocusEventName,
+  type TabsterMoveFocusEvent,
+} from '@fluentui/react-tabster';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useHasParentContext } from '@fluentui/react-context-selector';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { MenuContext } from '../../contexts/menuContext';
@@ -17,9 +23,10 @@ import type { MenuListProps, MenuListState } from './MenuList.types';
  */
 export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {
   const { findAllFocusable } = useFocusFinders();
+  const { targetDocument } = useFluent();
   const menuContext = useMenuContextSelectors();
   const hasMenuContext = useHasParentContext(MenuContext);
-  const focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: hasMenuContext } });
+  const focusAttributes = useArrowNavigationGroup({ circular: true });
 
   if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {
     // TODO throw warnings in development safely
@@ -29,6 +36,27 @@ export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLEl
 
   const innerRef = React.useRef<HTMLElement>(null);
 
+  React.useEffect(() => {
+    const element = innerRef.current;
+
+    if (hasMenuContext && targetDocument && element) {
+      const onTabsterMoveFocus = (e: TabsterMoveFocusEvent) => {
+        const nextElement = e.detail.next;
+
+        if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {
+          // Preventing Tabster from handling Tab press, useMenuPopover will handle it.
+          e.preventDefault();
+        }
+      };
+
+      targetDocument.addEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);
+
+      return () => {
+        targetDocument.removeEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);
+      };
+    }
+  }, [innerRef, targetDocument, hasMenuContext]);
+
   const setFocusByFirstCharacter = React.useCallback(
     (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {
       // TODO use some kind of children registration to reduce dependency on DOM roles

packages/react-components/react-tabster/etc/react-tabster.api.md

@@ -21,6 +21,8 @@ import { MoverMoveFocusEvent } from 'tabster';
 import { MoverMoveFocusEventName } from 'tabster';
 import * as React_2 from 'react';
 import type { RefObject } from 'react';
+import { TabsterMoveFocusEvent } from 'tabster';
+import { TabsterMoveFocusEventName } from 'tabster';
 import { Types } from 'tabster';
 
 // @internal (undocumented)
@@ -1220,8 +1222,13 @@ interface TabsterElementStorageEntry {
 // @public (undocumented)
 type TabsterEventWithDetails<D> = CustomEvent<D | undefined>;
 
+export { TabsterMoveFocusEvent }
+
+// @public (undocumented)
+type TabsterMoveFocusEvent_2 = TabsterEventWithDetails<TabsterMoveFocusEventDetails>;
+
 // @public (undocumented)
-type TabsterMoveFocusEvent = TabsterEventWithDetails<TabsterMoveFocusEventDetails>;
+export type TabsterMoveFocusEventDetail = EventsTypes.TabsterMoveFocusEventDetail;
 
 // @public (undocumented)
 interface TabsterMoveFocusEventDetails {
@@ -1235,6 +1242,8 @@ interface TabsterMoveFocusEventDetails {
     relatedEvent?: KeyboardEvent;
 }
 
+export { TabsterMoveFocusEventName }
+
 // @public (undocumented)
 type TabsterOnElement = Partial<RootOnElement & DeloserOnElement & ModalizerOnElement & FocusableOnElement & MoverOnElement & GroupperOnElement & ObservedOnElement & OutlineOnElement & UncontrolledOnElement & SysOnElement & RestorerOnElement>;
 
@@ -1285,7 +1294,7 @@ declare namespace TabsterTypes {
         GroupperMoveFocusEvent_2 as GroupperMoveFocusEvent,
         TabsterEventWithDetails,
         TabsterMoveFocusEventDetails,
-        TabsterMoveFocusEvent,
+        TabsterMoveFocusEvent_2 as TabsterMoveFocusEvent,
         TabsterDOMAttribute_2 as TabsterDOMAttribute,
         TabsterCoreProps,
         DOMAPI,

packages/react-components/react-tabster/src/index.ts

@@ -46,6 +46,8 @@ import {
   GroupperMoveFocusActions,
   MoverMemorizedElementEventName,
   MoverMemorizedElementEvent,
+  TabsterMoveFocusEventName,
+  TabsterMoveFocusEvent,
 } from 'tabster';
 
 export type TabsterDOMAttribute = Types.TabsterDOMAttribute;
@@ -80,3 +82,6 @@ export type GroupperMoveFocusEventDetail = EventsTypes.GroupperMoveFocusEventDet
 
 export { MoverMemorizedElementEventName, MoverMemorizedElementEvent };
 export type MoverMemorizedElementEventDetail = EventsTypes.MoverMemorizedElementEventDetail;
+
+export { TabsterMoveFocusEventName, TabsterMoveFocusEvent };
+export type TabsterMoveFocusEventDetail = EventsTypes.TabsterMoveFocusEventDetail;