form icon indicating copy to clipboard operation
form copied to clipboard

Subfield types set to unknown

Open Oudwins opened this issue 8 months ago • 3 comments

Describe the bug

This is a typescript typing bug that was not present in 0.42.0 (I'm unaware of when it was introduced as I just upgraded to v1 from that version).

It causes some subfields's type to be "unknown". To encounter it you must have a structure that causes the field name to be something like this: prop1.array[${idx].prop

This does only seem to happen when the array and/or parent object in the zod schema is set to optional. But there are some reports of user's having a similar issue even when the parent array or object are not optional (https://discord.com/channels/719702312431386674/1100436934205124660/threads/1349742197788119052)

edit: some other users are saying that the issue happens when using null or optional on arrays

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-uqugutkr?file=package.json,src%2Ffeatures%2Fpeople%2Fshared-form.tsx,src%2Ffeatures%2Fpeople%2Fpage.tsx&preset=node

Steps to reproduce

  1. go to page.tsx in the example
  2. Find the form.Field with name invoice.items[${0}].isPhysical
  3. See the error

Expected behavior

I expect the type in the field.state.value to be correct

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • Chrome
  • Linux

TanStack Form adapter

None

TanStack Form version

v1.1.0

TypeScript version

unsure

Additional context

No response

Oudwins avatar Mar 17 '25 11:03 Oudwins

Just encountered this as well. It’s quite confusing, because it makes it seem like there’s something wrong with the user types, but after checking them manually, they are correct.

I’ve reproduced it on the default array form example by only adding | null to people type: https://stackblitz.com/edit/tanstack-form-zajftkrw?file=src%2Findex.tsx

- people: [] as Array<{ name: string; age: number }>,
+ people: [] as Array<{ name: string; age: number }> | null, // Add `| null`

I’m a bit surprised no more people are reporting this. I guess not that many use it for more complex forms yet

selrond avatar Mar 31 '25 18:03 selrond

Your reproduction appears to work in version 1.12.0 . Stackblitz: https://stackblitz.com/edit/tanstack-form-cx8c947l?file=package.json%2Csrc%2Ffeatures%2Fpeople%2Fshared-form.tsx%2Csrc%2Ffeatures%2Fpeople%2Fpage.tsx&preset=node

Could you confirm that the issue is solved?

LeCarbonator avatar Jun 05 '25 16:06 LeCarbonator

I encountered a similar issue but it's not nested in my case. It happened because I had one of the zod imports as zod and another as zod/v4. Not a solution to your problem of course, thought I would throw this here.

./status.ts

import { z } from "zod";

export const StatusEnum = z.enum(["Completed", "In Progress", "Pending"]);

./formSchema.ts

import { z } from "zod/v4";
import { StatusEnum } from "./status.ts";

export const formSchema = z.object({
  status: StatusEnum,
  // rest of the properties
})

rohitv-dev avatar Jun 07 '25 17:06 rohitv-dev