Values in nested arrays do not get updated properly
Balastrong opened this issue · comments
Describe the bug
When you have an array inside an array, values are not updated properly since the field is not treated as an array.
In the MRE the structure is as follows:
people: [
{
names: ['Leonardo'],
},
],
When editing the string "Leonardo" in the field, I'm expecting setFieldValue
to properly compute the field as people[0].names[0]
but instead it gets people[0]["names[0]"]
As a result, if I type the char 5
in the text field I do not see the value updated, and if I submit the form I see that the state is now at
people: [
{
names: ['Leonardo'],
names[0]: 'Leonardo5'
},
],
Your minimal, reproducible example
https://stackblitz.com/edit/tanstack-form-9al5hb?file=package.json,src%2Findex.tsx
Steps to reproduce
- Try to edit the name in the text field, type a char
- Hit submit
- Notice you have both
names
array and a field callednames[0]
Expected behavior
In the example I would expect to see the value updated in the textfield and the state to be
people: [
{
names: ['Leonardo5'],
},
],
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
MacOS
TanStack Form adapter
None
TanStack Form version
v0.18.0
TypeScript version
No response
Additional context
I tried to investigate and I think the root cause is on makePathArray
not being able to handle multiple square brackets here
form/packages/form-core/src/utils.ts
Lines 129 to 136 in 39848e3
Probably a replaceAll should be enough, I'll try to draft a PR and add a test