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>
onChange
as value is entered - expected behaviour โ -
useRadioGroup
(docs) does not trigger<form>
onChange
as 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
.