Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#16,316 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
58/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
cpp, react-native
Lĩnh vực
desktop, frontend

Hướng nghiên cứu

Bắt đầu trong vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp, tập trung vào OnPointerPressed, OnPointerReleased và các kiểm tra IsPrimary(). Truy vết xem thao tác nhả chuột có đến được view hay không và gate có chấp nhận thao tác đó hay không, sau đó thêm interaction test được mô tả trong issue. Hoàn tất khi một cú nhấp chuột được tổng hợp phát ra SwitchEventEmitter::onChange và cập nhật Switch được điều khiển.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
C++
Star
17.4k
Fork
1.2k
Merge trung bình
2 ngày 17 giờ
Pull request đã merge (30 ngày)
13

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của microsoft/react-native-windows

Tất cả issue của microsoft/react-native-windows

Issue tương tự

Thêm issue về C++

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.