How to reset dirty or reinitialize form? dirty never false after call reset()
See original GitHub issueDescribe the bug Dirty is not reset after call reset().
To Reproduce Here is codesandbox for reproduce: https://codesandbox.io/embed/smoosh-shape-fuy5e
- There is
SampleForm
component to receiveuser
andonSubmit
props. it useuseEffect()
hook(line 15 ~ 18) for reset form whenprops.user
is updated. but currently, I commentedreset(user)
(line 17) for reproduce. - change some fields, and reset original value. the submit button’s disabled is toggle via
formState.dirty
(ex> Update name to Foo1, submit is enabled. Update name to Foo, submit is disabled) - uncomment
SampleForm
line 17,reset(dirty)
line. and try again step 2. the submit button is never disabled again even I tried set original value.
Expected behavior
formState.dirty
should be false when I change form value to original after call reset()
Screenshots
App.tsx
SampleForm.tsx:
(Ignore Rocket’s popup… 😉)
Desktop (please complete the following information):
- OS: MacOS 10.14.16 mojave
- Browser: Chrome
- Version: 76.0.3809.132
- react-hook-form@3.23.4
Additional context
Maybe it is not a bug. but I want to reset dirty value after I call reset()
. Is there another way to reset dirty? Thanks to your awesome library 😃
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:16 (8 by maintainers)
Top Results From Across the Web
React Hook Form - Resetting "isDirty" without clearing form?
Kinda assumed isDirty would be cleared once the form was submitted, but it remains dirty. I can call reset from the onSubmit ,...
Read more >useForm - reset - React Hook Form
DirtyFields and isDirty will remained, and only none dirty fields will be updated to the latest rest value. Check out the example.
Read more >Input controls remain dirty and not pristine after form.reset() in ...
When calling form.reset() after changing a controls value, I would expect the controls to be reset to dirty: false, pristine: true, touched: false....
Read more >Forms - Inertia.js
To reset the form values back to their default values, you can use the reset() method. Vue 2. Vue 3. React Svelte. //...
Read more >Detect Unsaved Changes in Angular Forms | by Netanel Basal
When the beforeunload event emits, we check if the component is dirty. If it is, we set the returnValue to false, which will...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
working on my end, if you can verify. we can release this fix soon 😃 ❤️
omg, blazing fast! I will check out your works!