TanStack / form

🤖 Powerful and type-safe form state management for the web. TS/JS, React Form, Solid Form, Lit Form and Vue Form.

Home Page:https://tanstack.com/form

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

  1. Try to edit the name in the text field, type a char
  2. Hit submit
  3. Notice you have both names array and a field called names[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

function makePathArray(str: string) {
if (typeof str !== 'string') {
throw new Error('Path must be a string.')
}
return str
.replace('[', '.')
.replace(']', '')

Probably a replaceAll should be enough, I'll try to draft a PR and add a test