adobe/react-spectrum

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

Open

#3 799 ouverte le 29 nov. 2022

Voir sur GitHub
 (2 commentaires) (1 réaction) (0 assignés)TypeScript (1 500 forks)auto 404
Formbughelp wanted

Métriques du dépôt

Stars
 (15 634 stars)
Métriques de merge PR
 (Métriques PR en attente)

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

  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

Guide contributeur