microsoft / microsoft/react-native-windows
Fabric: core Switch renders but never fires onValueChange on mouse click (new architecture)
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
Environment
- react-native-windows 0.83.2 (component source unchanged on
mainas of 2026-07-17), new architecture (Fabric, composition), Win32/HWND host - Windows 11, physical mouse input
- Reproduced in a production app; repro is trivial (any core
Switch)
Steps to reproduce
import {Switch} from 'react-native';
function Repro() {
const [on, setOn] = React.useState(false);
return <Switch value={on} onValueChange={v => { console.log('onValueChange', v); setOn(v); }} />;
}
- Run on react-native-windows with the new architecture enabled.
- Click the Switch with the mouse.
Expected
onValueChange fires with the toggled value; the Switch (a controlled component) re-renders in the new state. This is the behavior on Android/iOS.
Actual
The Switch renders correctly (including hover visuals), but onValueChange never fires on mouse click. No JS callback, no state change — the control is effectively inert for mouse users.
Root cause pointer
vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp (current main):
OnPointerReleased(~line 285) is the only mouse path totoggle()(~line 328), which emitsfacebook::react::SwitchEventEmitter::onChange— the native event behindonValueChange.- Both
OnPointerPressed(~line 262) andOnPointerReleasedearly-return unlessargs.GetCurrentPoint(-1).Properties().IsPrimary()is true.
On our device the emitter never fires for mouse clicks, so either the IsPrimary() gate rejects mouse pointer input on this code path, or OnPointerReleased is never routed to the Switch component view at all (pointer capture/hit-test). We have not stepped through native to disambiguate the two; what is proven on-device is that no onChange event reaches JS for any mouse click, on multiple screens and multiple Switch instances. The keyboard path (OnKeyUp, Space, ~line 318) is separate and was not part of this investigation.
Suggested fix
Ensure the pointer-released path reaches toggle() for mouse input: verify PointerRoutedEventArgs::GetCurrentPoint(-1).Properties().IsPrimary() returns true for mouse-generated pointer events in the composition input pipeline (or drop the IsPrimary() gate for mouse pointer devices), and add an interaction test that asserts SwitchEventEmitter::onChange fires on a synthesized mouse click.
Workaround (what we ship today)
Wrap the Switch in a Pressable that owns the interaction, and make the Switch itself inert:
<Pressable onPress={() => setOn(v => !v)}>
<Switch value={on} pointerEvents="none" />
</Pressable>
The Pressable receives the click and toggles state; the Switch is display-only. This restores mouse operation but bypasses the control's own accessibility/interaction semantics.
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 in vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp, focusing on OnPointerPressed, OnPointerReleased, and the IsPrimary() checks. Trace whether mouse release reaches the view and whether the gate accepts it, then add the interaction test described in the issue. Done means a synthesized mouse click emits SwitchEventEmitter::onChange and updates the controlled Switch.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp, react-native
- Domain
- desktop, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100