Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Fabric: core Switch renders but never fires onValueChange on mouse click (new architecture)

Aperta
  • Qualcosa non va?
#16,316 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
58/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
cpp, react-native
Ambito
desktop, frontend

Direzione di ricerca

Inizia in vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp, concentrandoti su OnPointerPressed, OnPointerReleased e sui controlli IsPrimary(). Verifica se il rilascio del mouse raggiunge la view e se il controllo lo accetta, quindi aggiungi il test di interazione descritto nell'issue. Il lavoro è completato quando un clic del mouse sintetizzato emette SwitchEventEmitter::onChange e aggiorna lo Switch controllato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Needs: Triage :mag:

Environment

  • react-native-windows 0.83.2 (component source unchanged on main as 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); }} />;
}
  1. Run on react-native-windows with the new architecture enabled.
  2. 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 to toggle() (~line 328), which emits facebook::react::SwitchEventEmitter::onChange — the native event behind onValueChange.
  • Both OnPointerPressed (~line 262) and OnPointerReleased early-return unless args.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.

Lingua principale
C++
Stelle
17.4k
Fork
1.2k
Merge medio
2g 17h
PR unite (30g)
13

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/react-native-windows

Tutte le issue di microsoft/react-native-windows

Issue simili

Altre issue su C++

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.