initialValue not updated correctly after useArrayField insert

[hnakamur]

What happened?

The meta.initialValue for the element inserted and elements after it becomes undefined.

Reproduction steps

1. Call insert function returned from useFieldArray by running the example at Demo link.

After insert is called, the initialValue for key=1 should be "good@example.com" and the initialValue for key=2 should be "b".

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• [ ] Firefox
• [X] Chrome
• [ ] Safari
• [ ] Microsoft Edge

Relevant log output

No response

Demo link

https://stackblitz.com/edit/vitejs-vite-4bmwrq?file=src%2FApp.vue

Code of Conduct

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

[hnakamur]

I wrote a test at https://github.com/hnakamur/vee-validate/commit/b8b29cfa9e62a8237e76994a59a1c53831919042

[logaretm]

The initial value is the value that the field got initialized with. The array fields do not get initialized with the mutation methods.

If you were to reset the form, then the initial values would still be the same array you started with. So relying on each field to maintain its original initial value won't be reliable as fields move around.

For example there are two ways you could argue this:

• Second field initial value should still be good@example.com because the form's initial values put it at the second element.
• Third field initial value should be good@example.com because it started with it and it got moved to the third position.

Both could be correct, but we have to go with one or the other. I realize the code is doing neither at the moment so I need to figure which path to go for.

[hnakamur]

If you were to reset the form, then the initial values would still be the same array you started with. So relying on each field to maintain its original initial value won't be reliable as fields move around.

I noticed form's meta.initialValues has an initial value for whole array and resetForm uses it instead of using initial values for elements. In the following example, pressing "Reset" button works fine even after initialValue of an element was overwritten to undefined. https://stackblitz.com/edit/vitejs-vite-36f6wn?file=src%2FApp.vue

I am not sure about what is a purpose of an initialValue for an array element. Is there a use case for something other than resetting a form?

[logaretm]

Is there a use case for something other than resetting a form?

Not really, it is just the nature of initial values. It is kind of complicated, we have two concepts of initial values:

• The starting value of the field, this is the value of the field when it gets mounted/added for the first time. Let's call this the start value.
• The original (initial) value of the field, this is the value of the field as it was initialized in the form. Let's call this the original value.

So when you first load up the example without any mutations, the two fields get their expected initial values. This is because the start and original values line up.

However, when you add a field in the second position, It should NOT receive the original value, because another field has already "claimed" it. Now the start values and original values no longer line up.

This is important to note because as you add/remove fields, they should not keep getting the initial value, instead each should start with a blank or whatever a different starting value is. This is why all newly added fields have undefined as an initial value in their meta because that reflects the original values in the form and not the starting value.

I think there is still a bug in this because both shouldn't be cleared, the third field should probably keep the initial value in its meta.