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

  1. wrap a component into a Controller
  2. change value of the component
  3. call the reset method
  4. 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)

Most upvoted comments

your CSB is broken, also for reset with the controller component, you will need to declare the fields.

reset({
  xxxx: 'xxx'
})

This is what I found. no defaultValue needed.

<Controller
   name="info"
   control={control}
   render={({ field: { name, value } }) => (
      <Textarea
         value={value}
         name={name}
       />
   )}
/>

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 Edit button. Clicking Edit switches it to edit mode, which has Cancel and Save. Cancel is really a reset and it puts the form back into “read only” mode and discards any unsaved changes. So, with that flow I could pass defaultValues into the reset and it would work.

However, if I click Edit, make changes, then Save. Then click Edit again, the original defaultValues are outdated since the form has been edited. I was hoping that just reset() would restore the values from the last successful submit or defaultValues if there has not been a successful submit.

Sounds like maybe that is beyond the scope of react-hook-form though. In which case, I will need to write some “wrapper” code to handle that. Maybe I can snapshot getValues after a successful submit, store that in React state, then use that in the reset.

your CSB is broken, also for reset with the controller component, you will need to declare the fields.

reset({
  xxxx: 'xxx'
})

This was a saviour 😃 Thank you very much. great work 😃

I got Form1 working now. I think that’s enough for now.

Thank you for your patience.

With controller components, it’s more ideal to supply reset values when default values are not supplied.

In my case default values are supplied. It seems to me that reset values are mandatory for controller components.

in your case <form onReset={reset}> you are pass event as the payload

No hurry, I know you are busy. I have plenty of other stuff to work on as well 😄