TanStack / TanStack/form

`withFieldGroup` array handling with nested

Open
#1,648 4 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Describe the bug

When combining the withFieldGroup for a complex array handling, the nested array element seems out of sync with the actual value of the group.

I've just tested while passing the root form to the SingleFieldWithReorder and the nested elements keep being out of sync (regarding the json value displayed)


Also, this is unrelated but when looking at the extra props of the render function, it seems to pass the fields and the form. Idk if this is expected or if the props must be sanitized when rendering to remove theses values before passing the props to the render method. (They are undocumented and not typed)

Your minimal, reproducible example

https://codesandbox.io/p/devbox/misty-monad-8t29lx?workspaceId=ws_PkVpfRWHUp5vMscgD59gVj

Steps to reproduce
  1. Try to move the value with the move down|move up buttons.
  2. See that the values from the base array mapping are correct, but the values rendered in the element aren't.
Expected behavior

I think the nested group value should remain sync with the array mapping from the parent group

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform
  • Browser: Tested on chrome 138.0.7204.183 (Official Build) (64-bit)
TanStack Form adapter

react-form

TanStack Form version

v1.15.1

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 CodeSandbox reproduction, focusing on withFieldGroup and the SingleFieldWithReorder component while moving nested array values up and down. Trace why the rendered nested values diverge from the parent array mapping, and inspect whether fields and form should be exposed to the render function. Done means the nested group stays synchronized and the render props behavior is resolved or documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.