TanStack / TanStack/form

Records fields have wrong types

Open
#1,551 2 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: bug v1 v2: needs investigation
Dominant language
TypeScript
Stars
6.7k
Forks
682
Avg merge
5d 18h
Merged PRs (30d)
7

Description

Describe the bug

I wonder if it is possible to have such field value with TanStack Form. Pretty sure it should (and is) but the types seem wrong:

function App() {
  const form = createForm(() => ({
    defaultValues: {
      firstName: '',
      lastName: '',
      address: {
        home: {
          street: '',
          number: '',
        },
      } as Record<string, { street: string; number: string }>,
    },
    ...
  }));

  return (
    <div>
      <h1>Simple Form Example</h1>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          form.handleSubmit();
        }}
      >
        ...
        <div>
          <form.Field
            name={`address.${'home'}.street`}
            children={(field) => (
              <>
                <label for={field().name}>Street:</label>
                <input
                  id={field().name}
                  name={field().name}
                  value={field().state.value}
                  onBlur={field().handleBlur}
                  onInput={(e) => field().handleChange(e.target.value)}
                />
                <FieldInfo field={field()} />
              </>
            )}
          />
        </div>

In this example, I specify the field name name={`address.${'home'}.street`} where home is a variable in my real use case.

If you open this Stackblitz repro, you'll notice this does not work as expected.

There is no type issue on the name attribute of form.Field as it respect one of the expected value (address.${string}.street), although the type of the value itself is wrong:

(property) value: {
    street: string;
    number: string;
} & string

So is the handleChange definition.

I've discussed it on Discord and it seems this bug is confirmed.

Your minimal, reproducible example

https://stackblitz.com/edit/ts-form-object?file=src%2Findex.tsx&preset=node

Steps to reproduce
  1. Go to Stackblitz
  2. Hover the typescript errors
Expected behavior

Have the correct type ;)

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS, Chrome

TanStack Form adapter

solid-form

TanStack Form version

1.6.3

TypeScript version

No response

Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked StackBlitz reproduction and inspect the inferred types for the dynamic address.${string}.street field in the Solid Form adapter. Reproduce the hover errors, trace the value and handleChange types, and consider the issue done when both reflect string rather than an intersection with the record type.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.