issue: formState.isDirty not updating correctly

[JunyeongChoi0]

Version Number

7.41.0

Codesandbox/Expo snack

https://codesandbox.io/s/bold-torvalds-qgwn53?file=/src/App.tsx:911-951

Steps to reproduce

1. Enter some value at first input that matches validation rule(v.length > 6 && v.endsWith("0")). For example, 1231230
2. Enter some value at second input that matches validation rule(v.length > 7 && v.endsWith("1")). For example, 12312321
3. See submit button. It is disabled.
4. Erase last character of second input, thus 1231232.
5. See submit button. It is disabled.
6. Enter '1' at second input. thus 12312321.
7. See submit button. It is (finally) enabled.

Expected behaviour

The submit button should not be disabled at step 3, because the form is valid and dirty.

In same situation, if you change !formState.isValid || !formState.isDirty into !formState.isDirty || !formState.isValid, It works as expected.
Also, if you add something like console.log(formState.isDirty) anywhere in component, it works.
But I think forms should work without above things.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

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

[bluebill1049]

isDirty is determined by your form values against the defaultValues which you have supplied at useForm, please investigate on your own by comparison. I suspect the issue could be missing value at defaultValues, react hook form wouldn't be able to assume what's your input's defaultValue if it's not supplied.

[bluebill1049]

I think the issue is related to the following:

https://react-hook-form.com/api/useform/formstate

[falk-stefan]

Seriously man.. that's effed up..

"Please use right syntax to make behavior work" 🙄

Almost sold my soul to the devil to make it work only to realize it's just a weird quirk - or whatever causes this issue ..