reset method does not affect Controller-wrapped components

[Hafas]

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

[bluebill1049]

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

reset({
  xxxx: 'xxx'
})

[bluebill1049]

looks CSB itself having issue.

[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.

[bluebill1049]

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

[bopfer]

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

[bluebill1049]

I will update the documentation tonight as well:

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

[Hafas]

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.

[bluebill1049]

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

[bluebill1049]

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.

Thanks for the detailed explanation as usual @bopfer

most likely you will have to supply the defaultValues for react hook form to reset correctly.

[bluebill1049]

going to close this issue and update the doc.

[Hafas]

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

I updated the csb and the issue still persists.
If I supply defaultValues in useForm it works, but defaultValue in Controller is ignored by reset.

[bluebill1049]

i tested your example and it works...
https://codesandbox.io/s/optimistic-sea-dppb6

[Hafas]

I must confess - the more I play with reset in csb the more I get confused (and I hope you can bear with me a little longer).

I updated the csb again with 2 forms:

• Form1 has defaultValues set in useForm.
  When the value in the input field and MyComponent are updated and then reset is called then:
  • MyComponent gets correctly reset ✔️
  • the input field clears instead of being reset to its default value ✖️
• Form2 has defaultValue set in Controller.
  When the value in the input field and MyComponent are updated and then reset is called then:
  • MyComponent is not reset ✖️
  • the input fields get correctly reset ✔️

[bluebill1049]

  return (
    <>
      <code>{value}</code>
      <button
        type="button"
        onClick={() => onChange(Math.floor(Math.random() * 100))}
      >
        Click
      </button>
    </>
  );
};

That's not even an input component... i am more than happy to help, but try to follow the lib docs, that will make my life and yours easier. if still having issue have a look at the source code may help you as well. if you spot issue, feel free to send a PR as well to help everyone.

<Controller name="random-number" as={<input />} using a real input or something like MUI TextInput for testing.

[bluebill1049]

https://codesandbox.io/s/flamboyant-goldwasser-nrfgo

[Hafas]

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

Thank you for your patience.

[maxy4u]

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 :)

[ShahriarKh]

This is what I found. no defaultValue needed.

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