Records fields have wrong types
Nobody has claimed this yet.
- 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
- Go to Stackblitz
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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