fix: Bubble Select change events to forms#10325
Conversation
|
Thanks for pointing me to the previous attempts. I reviewed both in detail. #6320 dispatched #8426 introduced a reusable state-event/input-event mechanism across several form components. This PR follows the same state-subscription direction, but keeps the scope to Select and its current single/multiple-selection API. The subscription is emitted only from the ListBox user-selection path, so form reset and native/autofill changes do not generate duplicate events. Before dispatch, the hidden select is synchronized so controlled and multiple-selection handlers observe the proposed value synchronously. I also addressed the large-collection gap in b4282f7. For collections over 300 items, HiddenSelect now keeps a native select containing only the current values rather than rendering every option. Missing values are added temporarily during synchronous dispatch, so form The two review tests were clarified as well: the native/autofill test is now explicitly distinguished from the ListBox-selection test, and the controlled test now uses a stateful parent that accepts the update. Verification:
|
|
CI follow-up: the |
Closes #6217
Summary
React Aria Select updates its hidden native select when an option is chosen, but React rendering alone does not emit a bubbling native
changeevent. As a result, patterns such as<form onChange={handler}>do not observe Select changes.This change:
changeevent;This is a focused follow-up to the reset, controlled-value, and large-collection concerns discussed in #6320. The state-subscription direction also follows the Select prototype in #8426, scoped to the current Select implementation and its multiple-selection API.
✅ Pull Request Checklist:
📝 Test Instructions:
Run:
The regression tests cover uncontrolled, controlled, native/autofill, form reset, multiple-selection, and over-300-item collection behavior. To verify manually, wrap a Select in a form with an
onChangehandler, choose an option from the ListBox, and confirm the handler receives one event whose target is the hidden native select with the selected value.🧢 Your Project:
Independent contribution.