Skip to content

fix(react-checkbox): preserve slot onChange handler using mergeCallbacks#35877

Open
karesansui-u wants to merge 1 commit intomicrosoft:masterfrom
karesansui-u:fix/checkbox-slot-onchange
Open

fix(react-checkbox): preserve slot onChange handler using mergeCallbacks#35877
karesansui-u wants to merge 1 commit intomicrosoft:masterfrom
karesansui-u:fix/checkbox-slot-onchange

Conversation

@karesansui-u
Copy link

Previous Behavior

useCheckbox_unstable uses direct assignment (state.input.onChange = useEventCallback(...)) which silently drops any custom onChange passed via the input slot prop.

For example, <Checkbox input={{ onChange: customHandler }} />customHandler is never called.

New Behavior

Uses mergeCallbacks(state.input.onChange, ...) to preserve custom slot handlers, matching the pattern used by sibling components:

  • Radio (useRadio.tsx:61): input.onChange = mergeCallbacks(input.onChange, ev => ...)
  • Switch (useSwitch.tsx:81): input.onChange = mergeCallbacks(input.onChange, ev => ...)

Related Issue(s)

None found — this is a previously unreported inconsistency.

useCheckbox used direct assignment with useEventCallback to set the
input onChange handler, which silently dropped any custom onChange
passed via the input slot prop. Switch to mergeCallbacks to preserve
slot handlers, matching the pattern used by Radio and Switch.
@karesansui-u karesansui-u requested review from a team and mainframev as code owners March 18, 2026 08:24
@karesansui-u
Copy link
Author

@microsoft-github-policy-service agree

@github-actions
Copy link

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-checkbox
Checkbox
33.522 kB
11.407 kB
33.408 kB
11.361 kB
-114 B
-46 B
react-components
react-components: entire library
1.292 MB
323.336 kB
1.292 MB
323.336 kB
17 B
react-list
ListItem
110.695 kB
32.627 kB
110.725 kB
32.622 kB
30 B
-5 B
react-table
DataGrid
159.313 kB
44.939 kB
159.346 kB
44.935 kB
33 B
-4 B
react-table
Table as DataGrid
130.528 kB
35.943 kB
130.566 kB
35.939 kB
38 B
-4 B
react-table
Table (Selection only)
68.916 kB
19.309 kB
68.954 kB
19.303 kB
38 B
-6 B
react-table
Table (Sort only)
67.559 kB
18.924 kB
67.597 kB
18.923 kB
38 B
-1 B
react-tree
FlatTree
147.635 kB
42.134 kB
147.668 kB
42.127 kB
33 B
-7 B
react-tree
PersonaFlatTree
149.463 kB
42.517 kB
149.496 kB
42.513 kB
33 B
-4 B
react-tree
PersonaTree
145.523 kB
41.338 kB
145.556 kB
41.337 kB
33 B
-1 B
react-tree
Tree
143.701 kB
40.972 kB
143.734 kB
40.964 kB
33 B
-8 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
70.397 kB
19.96 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
236.62 kB
68.716 kB
react-components
react-components: FluentProvider & webLightTheme
43.612 kB
14.022 kB
react-list
List
87.11 kB
25.762 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-table
Table (Primitives only)
40.997 kB
13.172 kB
react-timepicker-compat
TimePicker
108.174 kB
35.695 kB
🤖 This report was generated against 55ade976605866015dbc1d8b629513bc7515e1fe

@github-actions
Copy link

Pull request demo site: URL

@@ -0,0 +1,7 @@
{

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/CalendarCompat 4 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png 1208 Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png 488 Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium.png 487 Changed
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png 1090 Changed
vr-tests-react-components/Charts-DonutChart 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png 5581 Changed
vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png 5570 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png 599 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png 605 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 39 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 837 Changed
vr-tests-react-components/Skeleton converged 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Skeleton converged.Opaque Skeleton with rectangle - Dark Mode.default.chromium.png 24 Changed
vr-tests-react-components/Skeleton converged.Opaque Skeleton with rectangle.default.chromium.png 6 Changed
vr-tests-react-components/TagPicker 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png 658 Changed
vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png 1319 Changed
vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png 635 Changed

There were 4 duplicate changes discarded. Check the build logs for more information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants