Description
🐛 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
Metadata
Metadata
Assignees
Type
Projects
Status