issue: isDirty keep false after reset - using Field Array and append with class object

[jeffwong14]

Version Number

7.45.1

Codesandbox/Expo snack

https://codesandbox.io/s/fieldarraytest-rnmhpf

Steps to reproduce

In the code sandbox

1. Go to Add (append new item in Field Array)
2. Type any value
3. Click on save (form reset)
4. Click on edit button
5. Further change the value in "edit mode"
6. Check the log in console
7. The button is keeping disabled (as the disabled = {!isDirty || !isValid})

Note:

There is problem when the append is added with class object
i.e. append(new FormValues())

no problem when the append is using plain object
append({firstName : "", lastName: ""})

Expected behaviour

isDirty should set to true after the text box is changed
The useForm is using mode : "onChange"

What browsers are you seeing the problem on?

Chrome, Safari

Relevant log output

From the log, the defaultValue is changed when input text in step 


CardIndex | dirty false, valid true, state: {"defaultValues":{"list":[{"firstName":"42342344444","lastName":"423423"}]}}touchedFields: {"list":[{"firstName":true,"lastName":true}]} dirtyFields: {} 
....

CardIndex | dirty false, valid true, state: {"defaultValues":{"list":[{"firstName":"423423","lastName":"423423"}]}}touchedFields: {"list":[{"firstName":true,"lastName":true}]} dirtyFields: {}

Code of Conduct

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

[leapful]

@jeffwong14

Not sure why you need to use class object for field array but it will not be compatible with clone value handling from react-hook-form. The fallback for case cloning is not possible will be return the original object and that is the root cause of wrong dirty check.

You need to transform class object into plain javascript object before put it into append method.

[jeffwong14]

Your suggestion on "transform class object into plain javascript object before put it into append method." would be good solution for my case
Many thanks for your explaination :)