Repository navigation
fix(menu): enable FocusZone in MenuList on react-native-windows - #4367
Open
udit (UditDewan) wants to merge 2 commits into
Open
udit (UditDewan) wants to merge 2 commits into
udit (UditDewan) wants to merge 2 commits 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
Contributor
|
Please merge or rebase the latest changes from main to fix the test repo links test. This was caused by rnx-kit changing its documentation layout and should be already fixed in main. |
Contributor
Bundle size reportTree-shaken, minified production esbuild bundles with React and React Native runtimes externalized.
The job is advisory: size changes are reported but do not fail the pull request. Bundle or analysis errors still fail. |
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
2 participants
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):