form icon indicating copy to clipboard operation
form copied to clipboard

Field remove value duplicates items when conditionally rendering form

Open SethThoburn opened this issue 5 months ago • 2 comments

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

SethThoburn avatar Sep 23 '24 16:09 SethThoburn