T

TanStack•4w ago•

3 replies

moderate-tomato

Behavior of form.reset and isDefaultValue

Hey Guys, I have a stackblitz prepared: https://stackblitz.com/edit/tanstack-form-lhsfc5f9?file=src%2Findex.tsx

Here is my problem: I have a form with default values which will auto-submit every few seconds in the background. I only want it to auto-submit if there are actually changes to the values. Usually you need a combination of isDirtyisDirty and isDefaultValueisDefaultValue for this because if a user adds a character and deletes it again from one of the inputs we will see that isDirtyisDirty becomes

true

true

and stays

true

true

but with isDefaultValueisDefaultValue we can check if it differs from the default value. However after submission, if we get some data back from the backend (could be exactly the data we just submitted) and do a form.reset(value, { keepDefaultValues: true }); form.reset(value, { keepDefaultValues: true }); we get the effect that the form now has been resetted to this valuevalue and that isDirtyisDirty is set to

false

false

but sadly isDefaultValueisDefaultValue stays

false

false

. So now if a user adds and deletes a character from an input again the form is dirty and isDefaultValueisDefaultValue is

false

false

and I have no way to tell anymore that the data did in fact not change without resorting to saving it in some additional state.

What I would like is for the isDefaultValueisDefaultValue to flip to

true

true

, if we call form.reset(value, { keepDefaultValues: true }); form.reset(value, { keepDefaultValues: true }); , even if the valuevalue might not be the very first defaultValuedefaultValue on render.

Alternatively, is there another workaround with the tanstack form APIs?

StackBlitzKevin Peters

Form Simple Example (duplicated) - StackBlitz

Run official live example code for Form Simple, created by Tanstack on StackBlitz