diff --git a/.changeset/menulist-windows-focuszone.md b/.changeset/menulist-windows-focuszone.md new file mode 100644 index 0000000000..51b00d6667 --- /dev/null +++ b/.changeset/menulist-windows-focuszone.md @@ -0,0 +1,5 @@ +--- +'@fluentui-react-native/menu': patch +--- + +Wrap `MenuList` content in a `FocusZone` on react-native-windows so menu items support arrow-key, Home, and End navigation instead of being reachable only with Tab. diff --git a/packages/components/Menu/src/MenuList/MenuList.tsx b/packages/components/Menu/src/MenuList/MenuList.tsx index 40fa2f91ae..e216f73644 100644 --- a/packages/components/Menu/src/MenuList/MenuList.tsx +++ b/packages/components/Menu/src/MenuList/MenuList.tsx @@ -16,7 +16,7 @@ import { useMenuListContextValue } from './useMenuListContextValue'; import { MenuListProvider } from '../context/menuListContext'; import { directComponent } from '@fluentui-react-native/framework-base'; -const shouldHaveFocusZone = ['macos', 'win32'].includes(Platform.OS as string); +const shouldHaveFocusZone = ['macos', 'win32', 'windows'].includes(Platform.OS as string); const focusLandsOnContainer = Platform.OS === 'macos'; const hasCircularNavigation = Platform.OS === ('win32' as any); diff --git a/packages/components/Menu/src/MenuList/MenuList.types.ts b/packages/components/Menu/src/MenuList/MenuList.types.ts index 54d1c2da9f..6ba600a79d 100644 --- a/packages/components/Menu/src/MenuList/MenuList.types.ts +++ b/packages/components/Menu/src/MenuList/MenuList.types.ts @@ -86,7 +86,7 @@ export interface MenuListState extends Omit & { gap?: number }; - focusZone?: FocusZoneProps; // macOS and win32 only + focusZone?: FocusZoneProps; // macOS, win32, and windows only scrollView?: ScrollViewProps; }