search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.21k stars 1.07k forks source link

Controlled TextField resets on form reset #6555

Open tilpoe opened 1 month ago

tilpoe commented 1 month ago

Provide a general summary of the issue here

I don't know if it's a bug or expected behaviour, but i didn't find anything on that matter. To my understanding, controlled form fields shouldn't be reset when one resets their corresponding form, which works if one is using a simple input element. But if I use a controlled TextField, the input gets reset.

🤔 Expected Behavior?

Controlled TextField (or any other field) shouldn't be reset when resetting the corresponding form.

😯 Current Behavior

Controlled TextField (or any other field) gets reset when resetting the corresponding form.

💁 Possible Solution

No response

🔦 Context

In React 19 a form (and therefore uncontrolled form fields) gets automatically reset after submitting a server action (which apparently is just the same as calling form.reset() see: https://github.com/facebook/react/pull/28804). So if rac components get reset although they are controlled, i would have to work around the new react 19 behaviour by returning the previous values from the action, which would be kind of unneccessary work and also not suggested by the react team (https://github.com/facebook/react/pull/28491#issuecomment-2046154917).

🖥️ Steps to Reproduce

The behaviour after submitting a server action is the same as calling form.reset(), which is why i did this manually in this example to avoid having to set up next.js. You can just input some text in both fields and press the reset button. The RAC Component is reset, the default input is not.

https://codesandbox.io/p/sandbox/relaxed-nightingale-5j5yfm?file=%2Fsrc%2FApp.js

Version

1.2.1

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

No response

What operating system are you using?

macOS 14.3.1 (23D60)

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

snowystinger commented 3 weeks ago

React doesn't do well with form reset. As you noted, controlled inputs don't get cleared, they don't fire an onChange either, so it can be hard to remember to handle this case. We're matching native behavior, which we think is less confusing. You can still listen for the reset event on a Form https://codesandbox.io/p/sandbox/divine-leaf-h8ljw4?file=%2Fsrc%2FApp.js%3A15%2C18 if the value should be something other than the default cleared.

See native here: https://jsfiddle.net/x7uvbhkz/1/