Description
Describe the bug
I first noticed this bug when trying to build a way to change the order of items on a sales order. I have a "Discard Changes" button while editing the sales order that runs form.reset(). However, I noticed that after changing the order of the items and hitting "Discard Changes", it did not revert back to its original state.
I then added some console.logs, and realized that the underlying state (field.state.values) was actually correct. In other words, it reverted the state back to the default values, but did not correctly update the UI. I also noticed this only happens when using subFields inside my <form.AppField mode="array">.
After messing around with a small example on StackBlitz and asking some questions on the TanStack Discord, we realized that the issue is fixed by setting the key prop to the index when mapping through the field (field.state.value.map(...)). Previously I was setting it to the id of each of my data points.
To reiterate, the following conditions must be true to see the bug:
- You must have a field of array data (where
mode="array") - You must map over this data and display a list of elements
- Part of each of these list elements must include another form field (a "subField")
- Set the "key" prop (as required by React), to something unique (but not the index you get from
map)
You might just say "use the index and move on!" But, I am working with another library (dnd-kit) that needs the index to be tied to the data (like an id) to work properly. I believe that this behavior on the part of tanstack/form is unintentional, and any unique data for the key should work. As evidenced by my experience, forcing the use of the index as the key could also conflict with other libraries.
Your minimal, reproducible example
https://stackblitz.com/edit/vitejs-vite-ihw5x425?file=src%2FApp.jsx
Steps to reproduce
- Go to the StackBlitz link provided (note: StackBlitz seems to only work in Chrome at the moment)
- Change the order of the data using the up/down arrow buttons
- Press the "Reset Form" button (notice how it doesn't go back to the initial state)
Optional: Go into the code and change the key prop from the id to the index and repeat the above steps. Everything works as expected!
Expected behavior
The form state and the UI should revert to its original state on f
50A2
orm.reset(), as long as the key prop is set to any unique value.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Windows 11
Chrome 137
TanStack Form adapter
None
TanStack Form version
1.12.2
TypeScript version
No response
Additional context
No response