issue: isDirty is updated to true only after entering the second digit

[PantherX99]

Version Number

7.47.0

Codesandbox/Expo snack

https://codesandbox.io/s/jolly-fast-74r8mf

Steps to reproduce

1. Click "Open Dialog" and open Console
2. enter 1 digit into Menge input field and wait 1 second
3. even with delay, isDirty logs to false.
4. enter a second digit, isDirty logs to true

Maybe I'm just blind and can't find my error but the behavior seems a bit odd to me

bluebill1049
last week
Maintainer
Important: Make sure to provide all inputs' defaultValues at the useForm, so hook form can have a single source of truth to compare whether the form is dirty.
https://react-hook-form.com/docs/useform/formstate

this did not help and didn’t solve the issue. Since nobody answered, I have to create a new issue.

Expected behaviour

After the first digit is entered, isDirty should already be true.

In a larger component, the form also causes a re-render only after the first digit is entered. After that, it doesn't. It also causes a re-render when changing the date (not time) in one of the date pickers. Maybe this is related to that.

What browsers are you seeing the problem on?

Chrome, Safari

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[EiffelFly]

I am also encountering this issue, this feel weird especially when use with select. The first select value change didn't make the form become dirty

[xeeds]

Not sure if my explanation is the best, maybe/hopefully some other can contribute.
I'm pretty sure your form is dirty even though you don't think it is. In order to to print the form's state correctly, you will have to pass fieldState (in addition to field) as a prop to component when create method for render in Controller e.g
<Controller
control={control}
name="Menge"
defaultValue=""
rules={{ required: "Keine Menge angegeben" }}
render={({ field, fieldState }) => (
<TextField
...
/>

You can then do console.log(fieldState.isDirty) inside onChange e.g

          onChange={(event) => {
            if (event.target.value === "") {
              field.onChange(event.target.value);
            } else if (/[0-9,.]/.test(event.target.value.slice(-1))) {
              field.onChange(event.target.value);
            }
            console.log(fieldState.isDirty);
            setTimeout(() => {
              console.log(isDirty);
            }, 1000);
          }}

[proup24]

One year later and this issue still persists...
Solution for me was to declare a variable outside submit function scope. Not sure why using form state value directly doesn't work in this case, my guess here is the variable definition updates with each re-render while form state doesn't.

// This worked for me
const formIsDirty = form.formState.isDirty
const onSubmitModel = form.handleSubmit((templateData) => {
    if (!formIsDirty) return next()
    else return saveModel(templateData)
}
// This worked only on second keystroke
const onSubmitModel = form.handleSubmit((templateData) => {
    if (!form.formState.isDirty) return next()
    else return saveModel(templateData)
}