react-spectrum
react-spectrum copied to clipboard
Native HTML form change handler is not triggered for input type radio
๐ Bug Report
Native HTML <form> has onChange handler that triggers when form elements are updated. For example, when text is typed inside <input type="text" /> or value is updated in <input type="radio" />.
When <form> contains components that utilise useTextField and useRadioGroup from React Spectrum, the onChange handle is triggered inconsistently.
๐ค Expected Behavior
All form fields should behave consistently and as they're being modified <form> onChange should fire consistently. Especially given that React Spectrum uses native HTML elements under the hood.
๐ฏ Current Behavior
useTextField(docs) triggers<form>onChangeas value is entered - expected behaviour โuseRadioGroup(docs) does not trigger<form>onChangeas value is entered - unexpected behaviour โ
๐ Possible Solution
It is possible that event bubbling in useRadioGroup is being suppressed, thus never reaching <form> onChange. That would need looking into.
๐ฆ Context
Whilst using react-hook-form I was trying to capture all field values during onChange / onBlur stages
๐ป Code Sample
I have created two Codesandbox examples that verify:
-
Modifying
<textarea />triggers<form onChange={handleChange}>- see CodeSandbox -
Modifying
<div role="radiogroup">that uses native<input type="radio" />doesn't trigger<form onChange={handleChange}>- see CodeSandbox
๐ Your Environment
See CodeSandbox examples above
| Software | Version(s) |
|---|---|
| react-spectrum | |
| Browser | |
| Operating System |
๐งข Your Company/Team
n/a
๐ท Tracking Issue (optional)
n/a
Verified the behavior locally, thanks for the sandbox examples. Removing the following line makes onChange propagate to the form when clicking on one of the RadioGroup's radios but it doesn't when using the keyboard to change radio selection. We'd have to also dispatch an onChange in useRadioGroup onKeyDown handler as well or something.
Still digging as to why we have that stopPropagation in useRadio, git blame hits a dead end where we swapped repos haha.
As a side note, the same problem happen with useCheckboxGroup.