microsoft / microsoft/react-native-windows

Focus outline/visual incorrectly shown when element receives focus programmatically on app start

Open
#16,177 0 comments 0 reactions 0 assignees View on GitHub

A pull request for this has already been merged.

  • #16282 by @vineethkuttan — merged
bug Needs: Triage :mag:
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.