`withFieldGroup` array handling with nested
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
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
- Try to move the value with the
move down|move upbuttons. - 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
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 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