Skip to content

isDirty should flip back to false when default values are equal #1080

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

Closed
alexqhj opened this issue Dec 17, 2024 · 5 comments · May be fixed by #1456
Closed

isDirty should flip back to false when default values are equal #1080

alexqhj opened this issue Dec 17, 2024 · 5 comments · May be fixed by #1456

Comments

@alexqhj
Copy link

alexqhj commented Dec 17, 2024

Describe the bug

isDirty flips to true when you change any form value, but doesn't return to false when the state returns back to default values.

For most if not all form libraries I've used, the expected behavior is the form is not dirty when the default values is equal. See formik example here:
https://stackblitz.com/edit/react-hooks-form-validation-example-formik-hh9rdieb

Tanstack Form already exposes the isTouched property which can be used to determine if the form has been touched. It appears right now that both isTouched and isDirty now have the same behavior. Except when you reset the form, dirty returns to false as expected.

Your minimal, reproducible example

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

Steps to reproduce

  1. Type in to the input
  2. See that the form is dirty
  3. Remove the value from the input
  4. See that the form remains dirty
  5. Reset the form
  6. See that the form is no longer dirty

Expected behavior

  1. Type into the input
  2. See that the form is dirty
  3. Remove the value from the input (effectively resetting it)
  4. See that the form is no longer dirty

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

  • Windows
  • Chrome Version 131.0.6778.140

TanStack Form adapter

None

TanStack Form version

0.40.2

TypeScript version

No response

Additional context

No response

@thazlett16
Copy link

This is documented in the field-state section.

In your example if you add the isTouched prop with your isDirty flag, isTouched will change to true when you focus the input and then remove focus from the input field (without changing the value).

@alexqhj
Copy link
Author

alexqhj commented Dec 17, 2024

This is documented in the field-state section.

In your example if you add the isTouched prop with your isDirty flag, isTouched will change to true when you focus the input and then remove focus from the input field (without changing the value).

That's not what I'm referring to.
Even the docs say:

and "dirty" after the value has been changed

Changed, not modified.

A-B (the value has changed. I.e it's dirty)
A-B-A (the value hasn't been changed, i.e not dirty, but touched)

If the field returns to its original value, is it still dirty? All libraries I've worked with so far says no, it's only touched. Dirty is only true if the values differ from the initial value(s).

@thazlett16
Copy link

I'm not a maintainer so not sure for their reasoning but just wanted to point you to the right spot for the different lifecycles. Under the image of that link for field-state they say:

the isDirty flag in TanStack/form is different from the flag with the same name in RHF.

If you want to keep the issue open and talk to them about why that is the case that is fine. Just wanted to point you in the right direction!

@alexqhj
Copy link
Author

alexqhj commented Dec 17, 2024

Yeah I think it warrants a discussion. I'd love to hear the reasoning behind this deviation, as the behavior of isDirty seems to be a well established in many well known form libraries. I'll reopen this as a question instead.

@alexqhj alexqhj closed this as completed Dec 17, 2024
@devth
Copy link

devth commented Jan 17, 2025

Discussion continues at #1081 (I have the same question).

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

Successfully merging a pull request may close this issue.

3 participants