form
form copied to clipboard
TanStack
Removal of objects from nested arrays doesn't work as expected
Describe the bug
When removing an object from a nested array only the "id" field is removed from the element. This happens both if you use arrayField.removeValue and form.setFieldValue.
Your minimal, reproducible example
https://stackblitz.com/edit/tanstack-form-dbycl9vt?file=src%2Findex.tsx
Steps to reproduce
- Head to the stack bliz
- Click on any of the rendered codes (except the last one, that one works correctly)
- You will see in the console the logs of the data before and after each step. You will also see a react key error and can verify that although the object was removed the log that shows the data after the update shows the object that was removed without a id field
Expected behavior
The object is correctly removed. No key error is triggered. React renders the new list correctly.
How often does this bug happen?
Every time
Screenshots or Videos
https://github.com/user-attachments/assets/004bb73a-6824-4f55-8bb0-0f8b1fc3fcce
Platform
- OS: Linux
- Browser: chrome, brave
TanStack Form adapter
None
TanStack Form version
^0.43.2
TypeScript version
No response
Additional context
Example is a little chaotic. Monday I can clean it up. But I think the video shows what is happening quite well.
Updated the code to be simpler. Let me know if the issue is clear enough if not I'm happy to polish up the example more
Yeah, apologies @Oudwins I'm not clear what's happening in this example or what the bug you're suggesting exists is 😅
Yeah, apologies @Oudwins I'm not clear what's happening in this example or what the bug you're suggesting exists is 😅
Oh, thats a shame. I can try to make an even more minimal example and explain it further.
But for that it would be very helpful if you could explain a little bit further what you have understood (if any) and what you are confused about specifically.
I know this is hard if you don't understand anything but it's very hard for me to figure out a better explanation if I don't know what is confusing
From what I can tell, the fieldMeta still has a key for one of the fields inside the removed element:
On a subsequent render cycle, it's then re-added to the values:
Changing the key on the div from item.id to itemIndex fixes it (see screenshot below). I assume there is a problem in the state handling on form.Field.
On v0.48.1, remove value gets exactly the same bug
Doing a deep dive right now, but largely the bug is caused by setBy being called twice, once with
setBy called with path: consignments[0].goodsItems
and another with
setBy called with path: consignments[0].goodsItems[2].commodityCode
Trying to understand how key on the div is related.
I spent all day trying to debug this on 0.48.1 yesterday but 1.0 launched in the middle! and I saw #1199. Sadly it doesn't resolve the issue even with removeValue. I am gonna keep taking a swing at it for now but yes, it has to do with the internal implementation of the useSyncExternalStore hook and how react re-renders the items with same keys.
Still a mystery though; when __notifyDerivedListeners is called ( seemingly correctly ), and eventually scheduleUpdateOnFiber is called inside the hook. A mystery for me
Exactly same issue I have been facing even after v1.0, I just couldn't understand what is causing this issue, there is always a partial / invalid array item that remains after deletion
Can you try with this preview version if the bug is fixed and you don't see any regression in your code?
npm i https://pkg.pr.new/@tanstack/react-form@1319
