adobe/react-spectrum

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

Open

#3.799 geöffnet am 29. Nov. 2022

Auf GitHub ansehen
 (2 Kommentare) (1 Reaktion) (0 zugewiesene Personen)TypeScript (1.500 Forks)auto 404
Formbughelp wanted

Repository-Metriken

Stars
 (15.634 Stars)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

🐛 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

Contributor Guide