form
form copied to clipboard
Subfield types set to unknown
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
- go to page.tsx in the example
- Find the form.Field with name
invoice.items[${0}].isPhysical - 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
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
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?
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
})