Problem Description
In react-native-windows (Composition / Fabric), the keyboard focus ring
(focus visual) is drawn only after a real keyboard event has occurred
within a given ReactNativeIsland. When focus is placed programmatically
— either JS component.focus() or native
InputFocusNavigationHost.GetForSiteBridge(bridge).NavigateFocus(FocusNavigationRequest.Create(FocusNavigationReason.First))
— focus moves correctly (UIA/Narrator announces the element) but the island is
not put into the "show focus visuals" state, so no ring is rendered
until the user presses Tab/arrow inside that island.
The "keyboard mode" that enables the ring appears to be tracked per island:
a keypress that happened in island A does not enable focus visuals for a
programmatic focus placed into a freshly-shown island B.
Steps To Reproduce
- Build an app with two Composition content islands (each its own
ReactNativeIsland) — e.g. a main view and a popup/menu shown in a separate
island.
- Show the popup island and set focus on its first item, using either:
- JS:
firstItemRef.current.focus(), or
- native:
InputFocusNavigationHost.GetForSiteBridge(bridge).NavigateFocus(FocusNavigationRequest.Create(FocusNavigationReason.First))
- Observe the item is focused (Narrator announces it) but no focus ring is drawn.
- Press Tab or an arrow key → the focus ring now appears and behaves correctly.
Expected Results
When focus is moved with a keyboard navigation reason
(First / Last / directional), RNW should render the focus visual — matching
XAML/WinUI FocusState.Keyboard semantics. At minimum, there should be a way to
request keyboard focus visuals when setting focus programmatically (so a menu/
popup that opens via keyboard shows a ring on its initial item, and focus
restored to a caller after dismissing a popup shows a ring).
Actual results:
No focus ring is drawn on the initially focused element until the user presses
a key in that island. enableFocusRing is true on the components (the ring
renders correctly once keyboard navigation occurs).
Investigation suggests the NavigateFocusRequested handling moves focus but
ignores the FocusNavigationReason for focus-visual purposes, so even the
native NavigateFocus(...First) path does not enable the ring.
CLI version
CLI 0.81.3
Environment
- react-native-windows: 0.81.5
- @react-native-windows/cli: 0.81.3
- react-native: 0.81.5
- UI library: @fluentui/react-native 0.42.24 (ButtonV1, enableFocusRing)
- Architecture: Composition / Fabric, DesktopChildSiteBridge content islands
- Windows App SDK: bundled via host app (1.x)
- OS: Windows 11 (x64)
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
Problem Description
In react-native-windows (Composition / Fabric), the keyboard focus ring
(focus visual) is drawn only after a real keyboard event has occurred
within a given
ReactNativeIsland. When focus is placed programmatically— either JS
component.focus()or nativeInputFocusNavigationHost.GetForSiteBridge(bridge).NavigateFocus(FocusNavigationRequest.Create(FocusNavigationReason.First))— focus moves correctly (UIA/Narrator announces the element) but the island is
not put into the "show focus visuals" state, so no ring is rendered
until the user presses Tab/arrow inside that island.
The "keyboard mode" that enables the ring appears to be tracked per island:
a keypress that happened in island A does not enable focus visuals for a
programmatic focus placed into a freshly-shown island B.
Steps To Reproduce
ReactNativeIsland) — e.g. a main view and a popup/menu shown in a separateisland.
firstItemRef.current.focus(), orInputFocusNavigationHost.GetForSiteBridge(bridge).NavigateFocus(FocusNavigationRequest.Create(FocusNavigationReason.First))Expected Results
When focus is moved with a keyboard navigation reason
(
First/Last/ directional), RNW should render the focus visual — matchingXAML/WinUI
FocusState.Keyboardsemantics. At minimum, there should be a way torequest keyboard focus visuals when setting focus programmatically (so a menu/
popup that opens via keyboard shows a ring on its initial item, and focus
restored to a caller after dismissing a popup shows a ring).
Actual results:
No focus ring is drawn on the initially focused element until the user presses
a key in that island.
enableFocusRingistrueon the components (the ringrenders correctly once keyboard navigation occurs).
Investigation suggests the
NavigateFocusRequestedhandling moves focus butignores the
FocusNavigationReasonfor focus-visual purposes, so even thenative
NavigateFocus(...First)path does not enable the ring.CLI version
CLI 0.81.3
Environment
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