microsoft / microsoft/react-native-windows
Focus outline/visual incorrectly shown when element receives focus programmatically on app start
A pull request for this has already been merged.
- #16282 by @vineethkuttan — merged
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
Problem Description
When a component receives programmatic focus (via autoFocus or ref.focus()) during app startup, the focus outline/rectangle is displayed. This should not happen — programmatic focus should not trigger the focus visual, only keyboard-initiated focus should.
The same component focused programmatically at any other time (e.g., triggered by a button press) correctly does not show the focus outline. The issue is isolated to the initial app start focus.
Steps To Reproduce
- Create a React Native Windows app with a focusable element that receives focus on mount (via autoFocus prop or ref.focus() in a useEffect)
- Launch the app
- Observe: the element has a visible focus outline
- Now add a button that, when pressed, calls .focus() on the same element
- Click the button
- Observe: the element receives focus without the focus outline (correct behavior)
Expected Results
Expected behavior:
Programmatic focus on app start should behave the same as programmatic focus at any other time:
- The element receives focus (keyboard navigation works from that point)
- No focus outline/rectangle is rendered
- The focus visual only appears when the user subsequently navigates via keyboard (Tab, arrow keys, etc.)
Actual behavior:
On app start, the element that receives programmatic focus displays the focus outline immediately, as if the user had tabbed to it. This is visually jarring and inconsistent with the behavior at any other point in the app lifecycle.
CLI version
20.0.0
Environment
System:
OS: Windows 11 10.0.26100
CPU: (16) x64 Intel(R) Core(TM) Ultra 7 265H
Memory: 30.96 GB / 63.43 GB
Binaries:
Node:
version: 22.22.0
path: C:\Program Files\nodejs\node.exe
Yarn:
version: 1.22.22
path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm:
version: 10.9.4
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions:
- 10.0.19041.0
- 10.0.22621.0
- 10.0.26100.0
IDEs:
Android Studio: Not Found
Visual Studio:
- 17.14.37216.2 (Visual Studio Community 2022)
- 16.11.37206.5 (Visual Studio Professional 2019)
Languages:
Java: Not Found
Ruby:
version: 3.0.2
path: C:\tools\ruby30\bin\ruby.exe
npmPackages:
"@react-native-community/cli":
installed: 20.0.0
wanted: 20.0.0
react:
installed: 19.1.4
wanted: 19.1.4
react-native:
installed: 0.81.6
wanted: 0.81.6
react-native-windows:
installed: 0.81.15
wanted: 0.81.15
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Community Modules
No response
Target React Native Architecture
None
Target Platform Version
None
Visual Studio Version
None
Build Configuration
None
Snack, code example, screenshot, or link to a repository
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
Reproduce the startup behavior with a React Native Windows focusable element using autoFocus or ref.focus(), then compare it with focus triggered by a button press. Check merged pull request #16282 before starting; done means programmatic focus at app startup matches later programmatic focus without showing the focus outline.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- desktop
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100