Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Controlled TextField resets on form reset #6555

Open
tilpoe opened this issue Jun 17, 2024 · 1 comment
Open

Controlled TextField resets on form reset #6555

tilpoe opened this issue Jun 17, 2024 · 1 comment

Comments

@tilpoe
Copy link

tilpoe commented Jun 17, 2024

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: facebook/react#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 (facebook/react#28491 (comment)).

🖥️ 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
Copy link
Member

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants