Fields inside the ArrayInput aren't set as dirty when built

[biancaciuche]

ArrayInput has different behaviour in dev and in build.
I have a SimpleForm with an ArrayInput that has different inputs.

On a dev environment, when I am on an edit view, after editing a field that's inside the ArrayInput, the Save button is enabled and I'm able to save it.
On a built environment, in the same situation as described above, the save button remains disabled and the form isn't dirtied.

What you were expecting:

Both environments should behave in the same way, enabling the save button after editing a field that's nested inside an ArrayInput.

What happened instead:

The built env is not setting the edited field as dirty when that field is nested in an ArrayInput.

Steps to reproduce:

1. Build and serve the app (using npm run build-and-serve in the codesandbox from below)
2. Go to an edit view that includes an array input with fields
3. Edit a field from the ArrayInput
4. See the disabled save button

Related code:
https://codesandbox.io/p/devbox/arrayinput-bug-vtqyxv?file=%2Fsrc%2FApp.tsx%3A22%2C19

Other information:

Environment

• React-admin version: 4.16.9
• Last version that did not exhibit the issue (if applicable):
• React version: 18.2.0
• Browser: Chrome
• Stack trace (in case of a JS error):

[slax57]

Hi,
Thanks for submitting this issue.

I highly suspect this comes from this RHF issue, into which we ran recently too, and which should be fixed in the next RHF patch version.

The reason why you don't see it in dev mode is because the root issue has to do with controller components registration / unregistration, and in your sandbox you have React.StrictMode enabled, which apparently cancels this issue. (you can see that the issue can be reproduced in dev mode too by disabling React.StrictMode).

Let's wait for the next patch version of RHF to be released, so that we can confirm it fixes the issue.

Thanks again for the report in any case!