form
form copied to clipboard
Field remove value duplicates items when conditionally rendering form
Describe the bug
When adding list items to an array field with form.pushFieldValue, removing items doesn't work correctly if the form is conditionally rendered. The items are removed, but the last item is added back on the end, keeping the array the same length.
For example, if you have items 1, 2, 3, 4 and remove item 2, you are left with 1, 3, 4, 4.
Your minimal, reproducible example
https://stackblitz.com/edit/tanstack-form-qgeu9c?file=src/index.tsx&preset=node
Steps to reproduce
- Press "upload" to simulate uploading a spreadsheet.
- Remove one of the first three items.
- Notice how, while the item is removed, "Jordan" is appended on the end.
Expected behavior
- The value is removed and we are left with a list of 3 items, not 4.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- OS: MacOS
- Browser: Arc (Chromium)
- Version: 128.0.6613.120 (Official Build) (arm64)
TanStack Form adapter
react-form
TanStack Form version
v0.33.0
TypeScript version
v5.6.2
Additional context
No response