adobe / adobe/react-spectrum

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

Open
#3,799 2 comments 1 reaction 0 assignees View on GitHub
bug Form help wanted
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 Bug Report

Native HTML `` has `onChange` handler that triggers when form elements are updated. For example, when text is typed inside `` or value is updated in ``.

When `` 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 `` `onChange` should fire consistently. Especially given that React Spectrum uses native HTML elements under the hood.

## 😯 Current Behavior

1. `useTextField` ([docs](https://react-spectrum.adobe.com/react-aria/useTextField.html#text-area)) triggers `` `onChange` as value is entered - expected behaviour ✅
2. `useRadioGroup` ([docs](https://react-spectrum.adobe.com/react-aria/useRadioGroup.html#styled-examples)) **does not** trigger `` `onChange` as value is entered - unexpected behaviour ❌

## 💁 Possible Solution

It is possible that event bubbling in `useRadioGroup` is being suppressed, thus never reaching `` `onChange`. That would need looking into.

## 🔦 Context

Whilst using [react-hook-form](https://react-hook-form.com/) I was trying to capture all field values during `onChange` / `onBlur` stages

## 💻 Code Sample

I have created two Codesandbox examples that verify:

1. Modifying `` triggers `<form onChange={handleChange}>` - see [CodeSandbox](https://codesandbox.io/s/awesome-estrela-zv0zew?file=/src/App.tsx)

2. Modifying `<div role="radiogroup">` that uses native `<input type="radio" />` doesn't trigger `<form onChange={handleChange}>` - see [CodeSandbox](https://codesandbox.io/s/sleepy-roman-kp0x60)

## 🌍 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.