Repository navigation
Removal of objects from nested arrays doesn't work as expected #1171
Description
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
tanstack-form-issue.mp4
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.
Reacted by Florian Spieß
Activity
Oudwins commentedon Feb 25, 2025
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
crutchcorn commentedon Mar 1, 2025
Yeah, apologies @Oudwins I'm not clear what's happening in this example or what the bug you're suggesting exists is 😅
Oudwins commentedon Mar 1, 2025
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
MinnDevelopment commentedon Mar 1, 2025
From what I can tell, the
fieldMetastill 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.idtoitemIndexfixes it (see screenshot below). I assume there is a problem in the state handling onform.Field.crutchcorn commentedon Mar 1, 2025
Oh, in that case; does v0.48.1 solve this issue for removeValue?
flyingonionman commentedon Mar 1, 2025
On v0.48.1, remove value gets exactly the same bug
Doing a deep dive right now, but largely the bug is caused by
setBybeing called twice, once withsetBy called with path: consignments[0].goodsItemsand another with
setBy called with path: consignments[0].goodsItems[2].commodityCodeTrying to understand how key on the div is related.
flyingonionman commentedon Mar 2, 2025
Very simple example
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 theuseSyncExternalStorehook and how react re-renders the items with same keys.Still a mystery though; when
__notifyDerivedListenersis called ( seemingly correctly ), and eventuallyscheduleUpdateOnFiberis called inside the hook. A mystery for mefix(react-form): removing array items (TanStack#1171)
fix(react-form): removing array items (TanStack#1171)
fix(react-form): removing array items (TanStack#1171)
fix(react-form): removing array items (TanStack#1171)
fix(react-form): removing array items (TanStack#1171)
GauravRajSharma commentedon Mar 27, 2025
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
Balastrong commentedon Mar 28, 2025
Can you try with this preview version if the bug is fixed and you don't see any regression in your code?
Balastrong commentedon Mar 31, 2025
Fixed by #1319