Unmounting and Mounting of fields with useFieldArray is not working as expected

[sebastian-ludwig]

What happened?

When I list multiple items using useFieldArray and they are unmounted and then mounted back, the last items is visible again. I would expect the array to be empty again because of default keepValueOnUnmount = false

Reproduction steps

1. Go to Code-Sandbox
2. Click "Add" and enter some item data
3. Click "Add" and enter some other item data
4. Activate "Disable Fields"-Checkbox
5. Deactivate "Disable Fields"-Checkbox
6. Bug => The last item appears again

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://codesandbox.io/s/vee-validate-array-fields-forked-1gq0k7

Code of Conduct

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

[logaretm]

Thanks for reporting this. This is indeed a bug that happens because the field value deletion tries to delete the value at the old index when it doesn't exist because the earlier values were removed so the last item will always fail deletion.

So I need to figure out a way for fields to track their real-current-index in a form value.

[logaretm]

This was a tough one to fix, the issue was when a field array item is unset by v-if it removes its own path. However subsequent items' value becomes out of sync with their path name.

The fix is theoretically sound, we batch unsets into one batch but do them in a safe order where removals don't affect other fields' existence. In the case of a field array, we remove the bigger indexes first.

Will patch a release shortly.