issue: values overwrites defaultValues when both are provided to useForm

[Munhuggas]

Version Number

7

Codesandbox/Expo snack

https://codesandbox.io/s/eager-ganguly-kflwcy?file=/src/App.tsx

Steps to reproduce

1. Go to 'CodeSandbox'
2. Look at the code: Two forms are initialised with useForm, one with only defaultValues, and one with both defaultValues and values.
3. Look at the output. For the second form the defaultValues are overwritten by the values prop.
4. Click on the Set firstName to "UPDATED" button to update the value of the second form. Note that the defaultValue seems to remain unchanged as expected.

Expected behaviour

Providing the values prop to useForm should not overwrite the defaultValues.

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]

defaultValues will only populate the default values for inputs and then values should takes over as the form values.

[Munhuggas]

defaultValues will only populate the default values for inputs and then values should takes over as the form values.

When I read the documentation it seems to imply that defaultValues are also used for comparison to know if the form is dirty and the values to set when resetting the form. When values overwrites the defaultValues this functionality is practically completely lost which to me doesn't seem like intended.

[Moshyfawn]

You can configure your values API via resetOptions. In your case, if you wan to keep default values, you can pass

useForm({
  values,
+ resetOptions: {
+   keepDefaultValues: true
+ }
})

Although, I'm not sure if the values API makes in this case then.

[Munhuggas]

You can configure your values API via resetOptions. In your case, if you wan to keep default values, you can pass

useForm({
  values,
+ resetOptions: {
+   keepDefaultValues: true
+ }
})

Although, I'm not sure if the values API makes in this case then.

Thanks! I'll try it out! Still seems a bit counter intuitive that you'd ever overwrite the defaultValues unless explicitly doing so though. If nothing else maybe the documentation could be a bit clearer on this part?

[Moshyfawn]

The values is essentially a type of reset API to sync your form data with an ever-changing data set from an external storage, like Backend DB for example. In which case it makes sense to tread the external values as default values as they are the default ones in a sense that the DB (in the external DB data scenario) is the source of truth for your form's default values.

The most prominent use-case would be an edit form where the dataset for an entity has already been established.

You can reference the resetmethod API to learn more about different reset flags like keepDirty or keepDirtyValues to better fit your use-case.

[Munhuggas]

The values is essentially a type of reset API to sync your form data with an ever-changing data set from an external storage, like Backend DB for example. In which case it makes sense to tread the external values as default values as they are the default ones in a sense that the DB (in the external DB data scenario) is the source of truth for your form's default values.

The most prominent use-case would be an edit form where the dataset for an entity has already been established.

I am not sure I understand the need for both defaultValues and values. Don't they fulfil the exact same purpose?

My use-case was a simple filter for a list on a page:

1. I define the form for the filter with some empty default values so that you may clear the filter.
2. I pass in some pre-filled values through the URL query params so that you may load the page with some applied filters.

In the second case I still want to be able to reset the filter to the default values (i.e. clear the form). I can solve it by passing the default values to the reset function, but I would rather just have them defined for the form.

[cyonder]

it makes sense to tread the external values as default values as they are the default ones in a sense that the DB (in the external DB data scenario) is the source of truth for your form's default values.

This is a nice way to look at it but then why would we have both defaultValues and values? Instead, we can have values where we do this: values={...defaultValues, ...dbFormValues}.

When you separate the form data into two, I expect defaultValues to stay the same.

Also, let's say I have a field select component, its default/placeholder option value could be any of these options below:

1. Placeholder option: <option value="">Select an Option</option>
2. Placeholder option: <option value="all">All Categories</option>

I might wanna set the value dynamically to the defaultValue in the from state or I might wanna have an error handling in the select component, where I set the value to the defaultValue if formState has the wrong value, which isn't available to select in the select component.

So, by overriding defaultValues, this functionality is taken away.