From 2273226f1b5dcde7c17c807189c192ca0bc3e591 Mon Sep 17 00:00:00 2001 From: uditDewan Date: Wed, 14 Oct 2026 17:44:24 -0400 Subject: [PATCH] fix(menu): wrap MenuList in FocusZone on react-native-windows MenuList only used FocusZone on macOS and win32, so on windows the focusZone slot fell back to a plain View and menu items could only be reached with Tab. Now that native-core ships a Fabric FocusZone for windows, enable it there too so Up/Down/Home/End navigation works. Fixes #4174 --- .changeset/menulist-windows-focuszone.md | 5 +++++ packages/components/Menu/src/MenuList/MenuList.tsx | 2 +- packages/components/Menu/src/MenuList/MenuList.types.ts | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/menulist-windows-focuszone.md diff --git a/.changeset/menulist-windows-focuszone.md b/.changeset/menulist-windows-focuszone.md new file mode 100644 index 00000000000..51b00d6667a --- /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 40fa2f91aea..e216f736440 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 54d1c2da9f4..6ba600a79d3 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; }