Field remove value duplicates items when conditionally rendering form

[SethThoburn]

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

1. Press "upload" to simulate uploading a spreadsheet.
2. Remove one of the first three items.
3. Notice how, while the item is removed, "Jordan" is appended on the end.

Expected behavior

1. 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

[danielmarcano]

Have you found a solution to this issue @SethThoburn? I'm experiencing something similar...

[SethThoburn]

@danielmarcano It only seems to happen if the form is conditionally rendered, so I set the display to none rather than doing conditional rendering, I can make a reproduction later.

[crutchcorn]

Is this a dupe of #808?

[fulopkovacs]

This issue should be fixed by https://github.com/TanStack/form/pull/1097#.

See the fixed reproducible example here: https://stackblitz.com/edit/vitejs-vite-4uyspny3?file=src%2FApp.jsx