Native HTML form change handler is not triggered for input type radio
#3.799 aberto em 29 de nov. de 2022
Métricas do repositório
- Stars
- (15.634 stars)
- Métricas de merge de PR
- (Métricas PR pendentes)
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>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