microsoft / microsoft/fluentui-react-native
useMenuItem relies on stale React state
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.4k
- Forks
- 179
- Avg merge
- 16h 17m
- Merged PRs (30d)
- 30
Description
Willing to submit a PR to fix?
- I am willing to submit a PR to fix
Requested priority
None
Products/applications affected
The behavior of FURN's menu item to not show focus visuals on mouse hover to work around the platform's focus limitations relies on stale React state.
On hover, it calls setEnableFocusRing(false) in onHoverIn, then .focus() via useHoverFocusEffect. The .focus() triggers onFocus, which checks !pressable.state.focused — but this value is stale (React hasn't flushed the hover state yet), so it incorrectly evaluates to true and calls setEnableFocusRing(true), overwriting the false from onHoverIn.
Package version(s)
@fluentui-react-native/menu: *
OS version(s)
No response
Platform
- iOS
- macOS
- win32
- windows
- android
Xcode version
No response
Please provide a reproduction of the bug
Hover on a menu item
Actual behavior
No response
Expected behavior
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing useMenuItem, onHoverIn, onFocus, and useHoverFocusEffect in the menu implementation. Reproduce the issue by hovering a menu item on win32, then inspect how pressable.state.focused is read during focus. Done means hover no longer causes the focus-ring state to be restored incorrectly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100