TanStack / TanStack/form

[v2]: make fieldComponents less strict to allow grouping

Open
#2,360 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: types scope: react type: enhancement v2
Dominant language
TypeScript
Stars
6.7k
Forks
682
Avg merge
5d 18h
Merged PRs (30d)
7

Description

One thing we still can't do in v2 is attach groupings to our form fields. Like we have <field.Layout.Row> and <field.Layout.Stack> but we can't just add bare objects to fieldComponents on type level so we now make them a component that doesn't do anything and then attach Row and Stack to it:

export function Layout() {
  return null;
}

Layout.Row = ...
Layout.Stack = ...

It works at runtime, I think it's just a type mismatch that fieldComponents expects things that return jsx, but I think it would be great if we could add groups like this:

fieldComponents: {
  Layout: {
    Row, Stack
  }
}

as long as the last thing is a component..

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 by locating the v2 fieldComponents type definition and the existing component-shape types. Check how nested grouping objects are validated and confirm that grouped entries are accepted while the final leaf entries remain components; update or add relevant type tests if they are present.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.