issue: Form reset does not work in dialog/modal components in some cases

[thuraua]

Version Number

7.45.0

Codesandbox/Expo snack

https://codesandbox.io/s/nice-dew-4fr479

Steps to reproduce

1. Go to https://codesandbox.io/s/nice-dew-4fr479
2. Hit the ADD button and type in some values into the textfields
3. Hit RESET button - the input fields are cleared
4. Close the dialog
5. Hit the EDIT button and dialog should open with filled inputs
6. Hit RESET button - the fields are NOT cleared

Expected behaviour

The input fields should be cleared as well.

However if you type in something into the textfields and then reset the fields, the values will be reverted to the original values passed to the dialog component. It seems like the first values that are passed via form.reset become the new default values, although I have passed { keepDefaultValues: true} as an option parameter. In this example there are no default values passed to useForm, but the Controller component that wrapps the text fields has the defaultValue prop set to null.

Please note that the elements of the Dialog component are not mounted until the dialog is open by default.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

Can you try to provide defaultValues for useForm, you are using controlled components without defaultValues

[thuraua]

In my case the first values passed to reset become the new defaultValues regardless of the keepDefaultValues options param.

When I supply defaultValues to useForm the reset is working.
This means defaultValues on the form level are mandatory and a defaultValue on the field level is not enough?
But when I put the same form at the main page outside of any dialog/modal the reset clears all the fields without any issues.
It seems to me that this only occurs if the controlled input components have not been mounted until the dialog is open. If I set the keepMounted prop of MUI's Dialog component to true the children of the Dialog are mounted in advance and reset is working as well.

There is actually no way I will do something like:
useForm({ defaultValues: { field1: null, field2: null, field3: null, .... field99: null }})
Is there any workaround besides keeping the input components mounted all the time?

[leapful]

@thuraua

MUI Dialog component is using Popper.js + React Portal to position content element, therefore after being rendered, the DOM element will be mutated again for positioning and caused conflict on setting data of react-hook-form because react-hook-form will rely on mounted state to handle form values.

If you want to reset data on useEffect, make sure it happens after the position change, a workaround is using setTimeout.

Working demo: https://codesandbox.io/s/elated-albattani-lj2v8x?file=/src/AddOrEditModal.js

[thuraua]

To conclude, wenn working with Dialog components there are multiple options:

• Supply all defaultValues to useForm by hand
• Ensure the dialog's content is mounted in advance (e.g. by setting keepMounted prop to true)
• Use setTimeout as mentioned by @leapful
• Use some custom hook that sets the defaultValues properly as soon as the mounted fields change.
  Working Demo: https://codesandbox.io/s/xenodochial-chatterjee-lxrt2z?file=/src/AddOrEditModal.js
  The useEmptyDefaults hook utilizes Lodash's get and set functions to integrate with existing defaultValues.
  Please notice that this uses the form.control._name.mount internal API of react hook form.

Although there is no optimal solution for this problem, I hope this will help somebody out.

[lutzseverino]

Wow, this discussion is from 2023! I just opened an issue about this.

If the workarounds above don't cut it, we can also set a key to the Controller (key={watch("field")}) of course, this isn't particularly a good practice, but It'll do if required. Also setting the value to null instead of resetting works, at least in my context.

[cbuchert]

Adding key={name} where name is the name of the field was all I needed to do to resolve this issue. The component library I'm working with at present is FluentUI 9. Thanks for posting!