Repository navigation
fix(menu): enable FocusZone in MenuList on react-native-windows - #4367
Open
udit (UditDewan) wants to merge 1 commit into
Open
udit (UditDewan) wants to merge 1 commit into
udit (UditDewan) wants to merge 1 commit into
Conversation
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 microsoft#4174
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Platforms Impacted
Description of changes
Fixes #4174.
MenuListonly rendered itsfocusZoneslot as aFocusZoneonmacosandwin32. On react-native-windows the slot fell back to a plainView, so there was no container-level roving focus and menu items were reachable only with Tab.@fluentui-react-native/native-corenow ships a FabricFocusZonefor windows (#4354) that handlesfocusZoneDirection,navigateAtEnd,tabKeyNavigation, and Home/End keys, so this enables it forwindowsas well:packages/components/Menu/src/MenuList/MenuList.tsx: add'windows'toshouldHaveFocusZone. The existing props passed to the focus zone (focusZoneDirection: 'vertical',enableFocusRing: false,tabKeyNavigation: 'None') now apply on windows too. Circular navigation and focus-on-container behavior are unchanged (still win32-only / macOS-only respectively).MenuList.types.ts: update the slot comment.@fluentui-react-native/menu.Verification
yarn build,yarn lintandyarn testfor@fluentui-react-native/menu(all platforms' Jest suites pass),yarn format:check.Pull request checklist
This PR has considered (when applicable):