issue: regression: form values clear out array field value

[slax57]

Version Number

7.46.0

Codesandbox/Expo snack

https://codesandbox.io/s/calc-forked-73klv5?file=/src/App.tsx

Steps to reproduce

1. Open the sandbox
2. Submit the form
3. Note that the logs say {foo: "bar"}, although we would have expected {foo: "bar", cart: Array(0)}
4. Edit package.json to use version 7.44.0 or lower
5. Refresh the website panel
6. Submit the form
7. Note that the logs say {foo: "bar", cart: Array(0)}, as expected

Expected behaviour

I would have expected that providing values to useForm would not override the value of my array field.
Indeed if you remove the values, or use defaultValues instead, then the value for "cart" is no longer cleared (i.e. it's equal to [] instead of undefined).

This change seems to have occurred somewhere between version 7.44 and 7.45, according to my tests.

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

[Moshyfawn]

Related: #10525 #10606

[bluebill1049]

Note that the logs say {foo: "bar"}, although we would have expected {foo: "bar", cart: Array(0)}

why is that? values doesn't have an array.

[Moshyfawn]

why is that? values doesn't have an array.

My thoughts as well. I'm skeptical of this behavior for the same reason you are, but that's how it work(ed) with values before v7.45.0-next.0 and continues to work with defaultValues

[bluebill1049]

why is that? values doesn't have an array.

My thoughts as well. I'm skeptical of this behavior for the same reason you are, but that's how it work(ed) with values before v7.45.0-next.0 and continues to work with defaultValues

I think there is subtle difference in values vs defaultValues

• formValues will be derived from values
• defaultValues setup the inital state of your form, while uncontrolled input gets form values updated.

Overall, I think we want to move aways with partial defaultValues as well, each field array should at least provide the root defaultValues, it makes sense and especially makes type easier as well.

I am sure the issue is caused by the fixed which you have pointed above, and i think the work around is there so probably wont' spend time to find hacky solution for this.

[Moshyfawn]

I feel like there's a bit more to values than the controlled nature of it, but I see what you're saying and I agree that the source of truth in these 2 "scenarios" are different, per say.

Overall, I think we want to move aways with partial defaultValues

I've had this on my mind for some time now and I believe it can be the right direction, but I anticipate a lot of push back, which.. I mean, the devs who utilize the partial nature of defaultValues are often here creating bug reports 🤭

[bluebill1049]

I feel like there's a bit more to values than the controlled nature of it, but I see what you're saying and I agree that the source of truth in these 2 "scenarios" are different, per say.

Overall, I think we want to move aways with partial defaultValues

I've had this on my mind for some time now and I believe it can be the right direction, but I anticipate a lot of push back, which.. I mean, the devs who utilize the partial nature of defaultValues are often here creating bug reports 🤭

I couldn't agree more...

[slax57]

Note that the logs say {foo: "bar"}, although we would have expected {foo: "bar", cart: Array(0)}

why is that? values doesn't have an array.

@bluebill1049 I (respectfully) disagree.

If I add another input, say a text input, then its value will be added to the formData, although I did not declare it in the form's values.

For instance if I add a 'baz' input with a defaultValue of 'default', it will be added to the formData on submit:

  const { field } = useController({
    name: `baz`,
    defaultValue: "default"
  });

{foo: "bar", baz: "default"}

Even if I don't specify a default value, the field will be added to the formData:

  const { field } = useController({
    name: `baz`,
    // defaultValue: "default"
  });

{foo: "bar", baz: undefined}

See for yourself: https://codesandbox.io/s/calc-forked-vtmgcq?file=/src/App.tsx

So IMHO it's not illogical to have useFieldArray work the same way, with an empty array by default.
WDYT?

[Moshyfawn]

Even if I don't specify a default value, the field will be added to the formData:

Field array isn't a field, it's a "shell" that holds the list of fields that, when rendered and registered, will be added to the form values.

[slax57]

Thanks for your answer. But I'm still not fully convinced. We still need a way to manage the array field in is entirety, for instance to add validation (e.g. say the array cannot be empty), or to set a default value. These cannot be defined at the children level. Field array may be a "shell" in it implementation, but IMHO it should still allow to do things we do with a regular field, to handle both cases mentioned above.

Or am I missing something else? Is it necessary to also register the array field manually (e.g. with useController) to achieve this?