TypeScript errors and React setState console warning when adding an item to the array field

[Sergiu Plesco]

Describe the bug

The bug comes form TypeScript in the form of red lines due to the type definitions mismatch and second one in the console from React: " Warning: Cannot update a component (Field) while rendering a different component (Field). To locate the bad setState() call inside Field, follow the stack trace as described...."

Your minimal, reproducible example

https://codesandbox.io/p/devbox/react-form-2n6vht

Steps to reproduce

1. open console
2. click Add new to do button
3. see screenshots

Expected behavior

No errors or warnings in the console or files

How often does this bug happen?

Every time

Screenshots or Videos

Platform

macbook pro, m1
nextjs 14

Tanstack Form adapter

react-form

TanStack Form version

0.13.6

TypeScript version

5

Additional context

No response

[Sam Meech-Ward]

Confirming this issue. If you have default values, they default to undefined and updating them gives you

component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

The validation works just fine on each individual input, but the data is not available to the form provider

[Sam Meech-Ward]

So I was getting all kinds of errors by following what typescript wanted me to do with index and name. turns out, everything works when I ignore typescript and follow the docs. The issue is that my form field's TParentData does not extend any[]. I'm not sure why, since it's definitely an array.

} & (TParentData extends any[] ? {
    name?: TName;
    index: number;
} : {
    name: TName;
    index?: never;
})

So the code should look like it does in the docs:

<hobbiesField.Field
                  index={i}
                  name="description"

but ts was telling me to do this:

<hobbiesField.Field
                  // index={i}
                  name={`hobby.${i}.description`}

[Corbin Crutchley]

@SergiuPlesco please split this issue up into smaller byte sized chunks. There are some concerns here around the default warning (which should be fixed here: #606), while other comments are flagging challenges with the array API (fixing here: #588)