Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

unmounting Field with validation errors prevents form from submitting #1133

Closed
asegarra opened this issue Jan 30, 2025 · 5 comments
Closed

Comments

@asegarra
Copy link

asegarra commented Jan 30, 2025

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

@asegarra asegarra changed the title unmounting Field does not reset that fields meta including any errors unmounting Field with validation errors prevents form from submitting Jan 30, 2025
@juanvilladev
Copy link
Contributor

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
Copy link
Author

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
Copy link

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
Copy link
Author

asegarra commented Feb 20, 2025

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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants