useFieldArray push with custom component using useField mutates pushed object

[jasonlewis]

What happened?

When using the push function from useFieldArray in combination with a custom component using the useField helpers it seems to cause an issue whereby the pushed object is modified directly, so any subsequent pushes contain the modified values. It's a little hard to describe, so I've setup a reproduction: https://stackblitz.com/edit/vitejs-vite-oqwnxq?file=src%2FApp.vue

If you add a new row and enter something then add another row, the newest row will have the same values as the previous row.

If you instead push a clone of the object it appears to work fine, though I'm not sure that this is intended. Please let me know if you need any more details or if I'm doing something very wrong.

Reproduction steps

1. Check reproduction link.
2. Add new row.
3. Type into input.
4. Add another row to see it now has the same value as the previous row.

Version

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

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

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

Code of Conduct

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

[logaretm]

Not at all, vee-validate makes a habit of cloning your passed values to avoid cases like this where reactivity would leak into your original objects. The array functions didn't really do any cloning on that level which caused this issue.

I think vee-validate should handle this so I will mark it as a bug and push a fix, but generally, you would see this happening with other libraries out there. Something I like to do is to make the default values a factory function instead:

const DefaultValues = () => ({ value: null });

function add() {
  push(DefaultValues());

  // this works as expected
  // push({ ...DefaultValues });
}

[jasonlewis]

Using a function is actually a good point. I might do that as well. Cheers.

…

On Sat, 15 July 2023, 10:39 Abdelrahman Awad, ***@***.***> wrote: Closed #4372 <#4372> as completed via 9290f5a <9290f5a> . — Reply to this email directly, view it on GitHub <#4372 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGKNAZMKOBUAT6BTAT6QL3XQHUWPANCNFSM6AAAAAA2K46XAQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>