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

Wrong type in nested array

Balastrong opened this issue · comments

Describe the bug

In the arrays example, we have a form where the array is at the root of the object.
If I add a nesting level, the handleChange function cannot infer the correct type.

Example:


type FormDefinition = {
  nested: {
    people: {
      name: string;
      age: number;
    }[];
  };
};

On subField.handleChange(e.target.value) I get the following Typescript error:

Argument of type 'string' is not assignable to parameter of type 'UpdaterFn<never, never>'.(2345)
(property) React.ChangeEvent<HTMLInputElement>.target: EventTarget & HTMLInputElement

(see stackblitz)

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-kar7dz?file=src%2Findex.tsx

Steps to reproduce

  1. Have a form with an array inside an object

Expected behavior

Typescript gets the right type on handleChange, in this case (updater: Updater<string>) => void

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

macOS but also on stackblitz

TanStack Form adapter

react-form

TanStack Form version

v0.14.0

TypeScript version

v5.4.2

Additional context

An extra note, in an example I'm testing locally the component doesn't render at all and I get this error:
image

However I was not able to reproduce this on stackblitz so I'm only adding this as additional context.

Working on this now

This was a complex issue under-the-hood. I believe we have a fix in #626 but I want other maintainers to review and see if the code looks okay to them

Wow yeah, that didn't seems as an easy fix 😂

I'd love to touch some code if I find tiny changes to suggest :)

@crutchcorn Awesome! I hope that this fixes my issue. :)
That is - Would this solve the issue that I am facing trying to reach an entry in a list of a list, do you think? Like so:

image

I am super eager to test your change. :)

This doesn't seem to be fixed on the latest version, v0.19.0, as I'm getting the same UpdateFn<never, never> type error with a nested array.

Here's a minimal, reproducible example: https://stackblitz.com/edit/tanstack-form-tutv2o?file=src%2Findex.tsx

image

Opened a new issue to track this since it seems different enough in scope than what was properly fixed from this issue: #664