unmounting Field with validation errors prevents form from submitting

[asegarra]

Describe the bug

I'm having this issue, unmounting a field does nothing to the form, field is still there included any errors. If this field had any validation errors they still persist and prevents the form from being submitted.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/objective-hawking-n4xwq6

Steps to reproduce

1. Conditionally render last name by typing something in first name
2. type a character in last name
3. remove first name then enter first name again
4. last name value and validation errors remain

Expected behavior

unmounting a field shouldn't leave behind validation errors that prevent the form from submitting.

How often does this bug happen?

Always

Screenshots or Videos

No response

Platform

• OS: Windows 10

TanStack Form adapter

None

TanStack Form version

v0.41.3

TypeScript version

No response

Additional context

No response

[juanvilladev]

The library is not attached to the DOM, nor does it have any checks for a field being visible. You would have to handle setting a valid value likely using a listener when hiding the field.

See thread in the discord: https://discord.com/channels/719702312431386674/1341120307628478596/1341120307628478596

[asegarra]

It's been a while but it seems like tanstack form just isn't clearing out field meta for fields that are no longer mounted, so if the field had an error before being unmounted it prevents you from submitting. The way I got around it was to manually clear the field meta before ummounting. The use case I have is I want a field to be validated if it's mounted, and not validated at all if not mounted, specifically using field level validation, not schema.

[SimonEvertree]

Yeah I believe this is intended fuctionality. Tanstack does not keep track of your conditional validation showing/hiding fields. If you hide a field you need to revalidate the form with some kind of validation logic in place that says 'don't validate this field when it's hidden', which will update the meta correctly.

[asegarra]

Yeah I believe this is intended fuctionality. Tanstack does not keep track of your conditional validation showing/hiding fields. If you hide a field you need to revalidate the form with some kind of validation logic in place that says 'don't validate this field when it's hidden', which will update the meta correctly.

To be specific I am talking about unmounted fields, since hidden can mean still mounted but not visible. The issue is not that they're being validated, they are not, the issue is stale fieldMeta with errors for fields that are no longer mounted. The easiest solution I found was to manually clear out the fieldMeta. IMO I do feel this is something the framework should do.

[crutchcorn]

This is in fact intended behavior. When we removed fields' errors during unmount, it lead to a whole slow of unintended behaviors.

The solution is to create a component and remove errors inside of a useEffect's cleanup callback when we introduce our createFormHook API shortly here.

We'll document this behavior, but for now I'm going to close the issue so we can triage what's needed prior to v1 in a more fine-tuned way