react-hook-form: `reset` method does not affect `Controller`-wrapped components
Describe the bug
If the reset method is invoked the components wrapped in Controller won’t receive the default value; instead they keep getting their current value.
To Reproduce
- wrap a component into a
Controller - change value of the component
- call the
resetmethod - value does not reset
Codesandbox link https://codesandbox.io/s/optimistic-sea-dppb6
Change this value in the input field and click on the “Click” button.
When clicking on the “Reset”-Button, the input field resets to default but the field next to “Click” does not reset to -1
Expected behavior
Desktop (please complete the following information):
- OS: Ubuntu 18.04
- Browser: Firefox
- Version: 72.0.1
Additional context
The API documentation implies that it should work with Controllers: https://react-hook-form.com/api/#reset
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 18 (12 by maintainers)
your CSB is broken, also for reset with the controller component, you will need to declare the fields.
This is what I found. no
defaultValueneeded.It’s one of trade offs with uncontrolled inputs or components, especially when default values are not supplied, react hook form won’t be able to assume the default value for such reset.
I will take a look your description above closely tonight @bopfer
That complicates things. I have a form that loads in “read only” mode with an
Editbutton. ClickingEditswitches it to edit mode, which hasCancelandSave.Cancelis really a reset and it puts the form back into “read only” mode and discards any unsaved changes. So, with that flow I could passdefaultValuesinto theresetand it would work.However, if I click
Edit, make changes, thenSave. Then clickEditagain, the originaldefaultValuesare outdated since the form has been edited. I was hoping that justreset()would restore the values from the last successful submit ordefaultValuesif there has not been a successful submit.Sounds like maybe that is beyond the scope of
react-hook-formthough. In which case, I will need to write some “wrapper” code to handle that. Maybe I can snapshotgetValuesafter a successful submit, store that in React state, then use that in thereset.This was a saviour 😃 Thank you very much. great work 😃
I got
Form1working now. I think that’s enough for now.Thank you for your patience.
in your case
<form onReset={reset}>you are pass event as the payloadNo hurry, I know you are busy. I have plenty of other stuff to work on as well 😄