adobe/react-spectrum

Native HTML form change handler is not triggered for input type radio

Open

#3799 aperta il 29 nov 2022

Vedi su GitHub
 (2 commenti) (1 reazione) (0 assegnatari)TypeScript (1500 fork)auto 404
Formbughelp wanted

Metriche repository

Star
 (15.634 star)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

🐛 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

  1. useTextField (docs) triggers <form> onChange as value is entered - expected behaviour ✅
  2. 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:

  1. Modifying <textarea /> triggers <form onChange={handleChange}> - see CodeSandbox

  2. 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

Guida contributor