isDirty should align with other libraries

[alexqhj]

isDirty flips to true when you change any form value, but doesn't return to false when the state returns back to default values.
I'm unsure about the reasoning for this behavior.

Here's an example using Tanstack Form.
https://stackblitz.com/edit/tanstack-form-1cspfar1?file=src%2Findex.tsx

The docs specify:

Important note for users coming from React Hook Form: the isDirty flag in TanStack/form is different from the flag with the same name in RHF. In RHF, isDirty = true, when the form's values are different from the original values. If the user changes the values in a form, and then changes them again to end up with values that match the form's default values, isDirty will be false in RHF, but true in TanStack/form. The default values are exposed both on the form's and the field's level in TanStack/form (form.options.defaultValues, field.options.defaultValue), so you can write your own isDefaultValue() helper if you need to emulate RHF's behavior.`

But there's no explanation of the reason for this choice. But it was apparently unusual enough to warrant its own note in the docs.

If isDirty can't, or won't be changed, perhaps there's a way to expose a value indicating that the form is no longer in its default state. This is very useful for disabling submit buttons for example.

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

Perhaps it would be appropriate to
Option 1: Return isDirty to it's well known behavior of returning to false when the form is at its default values.
Option 2: As option 1, but isPristine is no longer a mirror of isDirty, but rather isPristine will be false when any change to the form has been made.
Option 3: Expose a new property, like isModified or isChanged to indicate that the values differ from the default/initial values.

[nimo23]

I really think the current behavior of isDirty is a bug - the explanation in the docs doesn't make it any less of a bug.

I mean, if isDirty == true, even if the field values ​​in the end are actually not changed from their original state, then TanStack form is giving us wrong information because isDirty = true is just wrong.

Therefore, the current behavior of isDirty feels like a bug..

[ioson]

i just run into this and think there should be a way to check for a changed form state.
The current implementation is confusing.

Either change isDirty or add isModified or isChanged as alexqhj suggested.

[przemoch-dev]

This is great idea. Let's keep track of both the existing isDirty attribute and the new isModified attribute.

[madsh93]

Yes, the current state does not make sense. isDirty should never be true when currentValues === defaultValues. Then it's simply not dirty. It is clean as a whistle.

[harry-whorlow]

@alexqhj I'm working on this now, hopefully will have a PR ready by the end of the day 🤟

How dose this sound with meta.isDefaultValue?

[CanRau]

To me it's like a "bug"-fix that possibly warrants a major version bump 🤓
But this is just me, this hook is a good enough workaround currently

[LeCarbonator]

To me it's like a "bug"-fix that possibly warrants a major version bump 🤓 But this is just me, this hook is a good enough workaround currently

There's nothing to fix. The field is no longer pristine, even if the value happens to align with the default. The only way to return to the defaultValue is to touch a pristine field and dirtying it, then editing it again so it returns. That's not a pristine field. A separate property is the way to go in my opinion.

The docs specifically mentioning this behaviour and describing isDirty

The PR for isDefaultValue

[CanRau]

Hmm yeeaa ok aligning it with pristine I get it now 😅

Would still argue isPristine as you are saying isDirty like op but I see how that would be confusing 😅

Wanted to suggest isChanged that could behave like op wants isDirty to behave but it's still ambiguous I guess and isDefaultValue is the clearest in the end 👌

Thanks for making me understand 💛

[harry-whorlow]

Good to see the discussion happening 😄

So, @LeCarbonator has made a great point

The only way to return to the defaultValue is to touch a pristine field and dirtying it, then editing it again so it returns. That's not a pristine field

---

But, to build on it....

isDefaultValue is pretty much the inverse of RHF implementation of isDirty:

field is dirty	field value is default		RHF isDirty	isDefault
true	true		false	true
false	true		false	true
true	false		true	false

So doing something like !isDefaultValue is equivalent to what I'm calling flippable isDirty™️, or how most of the react ecosystem handles isDirty.

However when you consider the other frameworks, there's quite a split of implementation’s:

Flippable isDirty (when value === default && dirty === true, isDirty = false ):

• RHF
• Formic
• Final form

Persistent isDirty (when value !== default && dirty === true, isDirty =true ):

• Angular form
• Vue FormKit

(non exhaustive list, please correct me if I'm wrong 😊)

We're kind of in a situation where either way we roll this someone won't be happy. But, having isDefaultValue allows us to get the same functionality of RHF (albeit inverse). Whilst also allowing, you the user, to track if the field has been dirtied at any point in its life, whereas in flippable isDirty™️ this information is lost.

I'm going to rewrite the docs in my PR #1456 so hopefully it's clearer, in the meantime if you have any comments drop them here... I'll additionally ping this issue, once I'm done, so you can add you input to the PR 😄.

[CanRau]

A flippable isDirty should be accompanied by something like isChanged that's always true once a field has been changed regardless of it's been reversed to default.

My own arguments where because I was used to the RHF behavior, but I'm fine with both versions as long as you can get all the information

[harry-whorlow]

@alexqhj how dose this do? feel free to leave a review over at #1456

[harry-whorlow]

#1456 was just merged giving you access to meta.isDefaultValue which if you do something like !meta.isDefaultValue will give you the reacts ecosystems isDirty.

The docs are here. We'd love to hear some feedback😄

[jcramb]

Is it possible to use this in a similar way to isDirty for the entire form?

e.g. in my solid app currently I have const isDirty = form.useStore(state => state.isDirty); will I be able to write this with the same approach as isDefaultValue?

I'm really confused on why "persistent dirty" would be the selected approach - what's the recommended approach for disabling a submit button to prevent unneccessary submissions of the same data?

[harry-whorlow]

Yeah, you would use const isDefaultValue = useStore(state => state.isDefaultValue)

Then if you don't want to be able to submit the same data, your button would look like

<button type="submit" disabled={!canSubmit || isDefaultValue}>
  {isSubmitting ? '...' : 'Submit'}
</button>

---

With regards to this:

I'm really confused on why "persistent dirty" would be the selected approach

• LeCarbonator comment
• my comment
• changing it would be a breaking change... and then the Angular and Vue ecosystem would be upset

Hope this helps/clarifies 😄

[danvoyce]

I've achieved this like so

<form.Subscribe selector={(state) => state.isDefaultValue}>
  {(isDefaultValue) => (
    <Button type="submit" disabled={isDefaultValue}>
      Save changes
    </Button>
  )}
</form.Subscribe>