SimpleForm isDirty is always true if ArrayInput is used

[AlexDroll]

What you were expecting:

• if no input is changed the form should still be not dirty

What happened instead:

• isDirty property using the useFormState() hook from react-hook-form is set to true
• for the initial rendering isDirty is still false but becomes true in the following renderings (see console output in the sandbox)
• the dirtyFields are still empty as expected
• in the defaultValues the source of the ArrayInput groups disappears after the first rendering (see console output in the sandbox)

Steps to reproduce:

• open the code sandbox
• open the console
• reload the page

Related code:

• Code sandbox with minimal example: here

Other information:

• this issue is also related with react-hook-form updates
• the isDirty worked with [email protected]
• The issue with the disappearing default value existed already for [email protected]

Environment

• React-admin version: 4.16.10
• Last version that did not exhibit the issue (if applicable):
• React version: 18.2.0
• Browser: firefox, chrome

[slax57]

Reproduced, thanks!
Appreciate the great sandbox btw 😊

Until this is fixed, you can use the same workaround we used in SaveButton.tsx:

    const { dirtyFields, isValidating, isSubmitting } = useFormState();
    // useFormState().isDirty might differ from useFormState().dirtyFields (https://github.com/react-hook-form/react-hook-form/issues/4740)
    const isDirty = Object.keys(dirtyFields).length > 0;

[AlexDroll]

Yes. We use the same workaround. 🙏

Just one hint, this only works partially. If I change one value in the array input and then revert the changes the field is still listed in the dirtyFields. As a consequence also the SaveButton is enabled.

[Nilegfx]

I am not sure if I should open separate issue or just comment in this issue. so I will start with a comment and maybe separate it if needed.

I am facing relatively same inconveniences with ArrayInput and dirty behaviour. in my case, I am using zod resolver.

What you were expecting:

1. the form is not dirty
2. clicking the plus button adds an element and makes the form dirty
3. clicking the save button (without properly filling the inputs) the form should report the errors and the save button should stay enabled (as the array input still has an element added and the logic of save button rely on dirty state not validation state)
4. properly fill the input and click save should successfully submit the form

What happened instead:

react-admin-react-hook-form-isDirty-issue.mp4

Steps to reproduce:

here are the two stackblitz that reproduces the two behaviours
on the right side (browser) navigate to /#/posts/create

• old-working (with react-hook-form 7.50.1)
• broken (with latest react-hook-form)
  there is no difference between the two repo other than the resolution key in the package.json

Other information:
note that I fixed the react-hook-form version to 7.50.1 as the next release 7.51.0 is the one that introduced my issue

[Nilegfx]

I think this issue on react-hook-form side is related