Removing an entry from an array causes the array to receive invalid data
Hi there, I have some role management code where I iterate through an array of roles from the backend and show checkboxes for each role and each role is linked to an index in a form array. Whenever I uncheck a checkbox it seems to correctly call
I have a stackblitz where this odd behaviour can be reproduced: https://stackblitz.com/edit/tanstack-form-9vub96pu?file=src%2Findex.tsx
Assuming when I'm editing the user which has both
1. I click
1. In the breakpoint I have on the
1. When logging
1. It correctly finds the
1.
1. The form state now results in
1. Click the Submit button
This then trips up Zod which says that
What I find particularly notable is that as far as I can tell this problem is only happening when editing an existing user, but when I log the whole
So the question is, why is that second entry in the array even there? What is adding it? Especially since it's not even the role I just clicked to remove.
form.removeValueform.state.values.rolesnameRoleI have a stackblitz where this odd behaviour can be reproduced: https://stackblitz.com/edit/tanstack-form-9vub96pu?file=src%2Findex.tsx
Assuming when I'm editing the user which has both
AdminUser1. I click
Admin1. In the breakpoint I have on the
onChangeevent.target.checked1. When logging
form.state.values1. It correctly finds the
id1.
field.removeValue(roleIdx)1. The form state now results in
1. Click the Submit button
This then trips up Zod which says that
roles[1].externalWhat I find particularly notable is that as far as I can tell this problem is only happening when editing an existing user, but when I log the whole
form.state.valuesSo the question is, why is that second entry in the array even there? What is adding it? Especially since it's not even the role I just clicked to remove.
StackBlitzJeroen Claassens
Run official live example code for Form Array, created by Tanstack on StackBlitz
