Array subfields missing errors in fieldMeta

[juanvilladev]

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.

[harry-whorlow]

@juanvilladev could you do me a massive favour? can you try this again with the latest version... theres a slight chance my latest commit might have fixed this as a side effect.

A very slight chance, but a slight chance at that... if not I'll have to investigate 😄

[edit] Just checked it myself, unfortunately not

[rhupp-wps]

Hey, I wanted to ask what the status of the problem is, the error still exists and we can not display error messages on the arrays. (tested with 1.14.2)

[brandonleichty]

I’m also running into this same issue and am curious if there are any updates?

[harry-whorlow]

If someone would be so kind to check the unit test I've wrote is testing for the expected behaviour, that would be a massive help to getting this fixed.

I'm on holiday atm so getting some conformation before starting the fix would be super appreciated 😄.

[dlindahl]

I believe I am also seeing this issue if a form is validated before the FieldApi instance mounts in the DOM, regardless of explicit pushFieldValue behavior.

In my use case, certain form fields are rendered in a Tab Panel that is not mounted unless the user click on the Tab. The form still validates successfully and the unmounted field errors on present in the FormApi's error state as expected.

If the user then clicks on the Tab and the Tab Panel that contains the fields renders, the FieldApi instances mount but they do not derive their FieldMeta from any existing FormApi state.

So the same de-sync issue arises where a field has errors in the FormApi error state but the FieldMeta does not reflect any issue.