Removal of objects from nested arrays doesn't work as expected

[Oudwins]

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

1. Head to the stack bliz
2. Click on any of the rendered codes (except the last one, that one works correctly)
3. 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.

[Oudwins]

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]

Yeah, apologies @Oudwins I'm not clear what's happening in this example or what the bug you're suggesting exists is 😅

[Oudwins]

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

[MinnDevelopment]

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.

[crutchcorn]

Oh, in that case; does v0.48.1 solve this issue for removeValue?

[flyingonionman]

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.

[flyingonionman]

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

[GauravRajSharma]

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]

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