adobe/react-spectrum

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

Open

#3,799 建立於 2022年11月29日

在 GitHub 查看
 (2 留言) (1 反應) (0 負責人)TypeScript (1,500 fork)auto 404
Formbughelp wanted

倉庫指標

Star
 (15,634 star)
PR 合併指標
 (PR 指標待抓取)

描述

🐛 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

貢獻者指南