react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

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

Open josephmarkus opened this issue 2 years ago โ€ข 2 comments

๐Ÿ› 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

josephmarkus avatar Nov 29 '22 17:11 josephmarkus

Verified the behavior locally, thanks for the sandbox examples. Removing the following line makes onChange propagate to the form when clicking on one of the RadioGroup's radios but it doesn't when using the keyboard to change radio selection. We'd have to also dispatch an onChange in useRadioGroup onKeyDown handler as well or something.

Still digging as to why we have that stopPropagation in useRadio, git blame hits a dead end where we swapped repos haha.

LFDanLu avatar Nov 29 '22 18:11 LFDanLu

As a side note, the same problem happen with useCheckboxGroup.

polc avatar Feb 17 '24 18:02 polc