TanStack / TanStack/form

Array subfields missing errors in fieldMeta

Open
#1,460 8 comments 12 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 a user pushes a field using field.pushValue or form.pushFieldValue, errors for the subfields are missing from fieldMeta.

This leads to a really bad state if the new subfield has errors on the form level schema. canSubmit becomes false so they can't submit the form, yet the error cannot be surfaced.

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-lntbeysv?file=src%2Findex.tsx

Steps to reproduce
  1. Add a row
  2. Notice canSubmit is now false, yet no error is surfaced
  3. Click "Log all errors" notice that the form has the errors, but is missing from the fieldMeta
Expected behavior

In the UI, I would expect the error is immediately surfaced to the user.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

See StackBlitz, latest version of TSF, valid TS version

TanStack Form adapter

react-form

TanStack Form version

^1.7.0

TypeScript version

No response

Additional context

This happens because we run the validator before the new pushed subfields mount. Since they have not mounted fieldMeta does not exist leading to the difference between the errorMap on the form and field level.

I propose that onMount we always check if the form errorMap contains errors for the field. If so, copy it over.

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 StackBlitz reproduction at src/index.tsx and trace field.pushValue and form.pushFieldValue through mounting and fieldMeta synchronization. Check the onMount path against the form errorMap for newly mounted subfields; done means errors present in the form errorMap are also surfaced in fieldMeta after adding a row.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.