Skip to content

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

Open
@josephmarkus

Description

@josephmarkus

🐛 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinghelp wantedExtra attention is neededrsp:Form

    Type

    No type

    Projects

    Status

    📋 Waiting for Sprint

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions