Unable to disable `autoFocus` for new item in `<SimpleFormIterator />`

[smeng9]

What you were expecting:

I have a TextInput inside <SimpleFormIterator /> of the ArrayInput.
If I set the autoFocus property to false, I expect it will not be focused when clicking the add button from the SimpleFormIterator

What happened instead:

The input field is always autoFocused, there is no way to disable it.

Steps to reproduce:

Create an ArrayInput with SimpleFormIterator and some TextInput inside. The TextInput explicitly has autoFocus set to false.
When clicking the add button in the SimpleFormIterator, it still gets the focus, which is not the expected behavior.

Related code:

https://codesandbox.io/p/github/marmelab/react-admin-sandbox/csb-8g7h49/draft/wizardly-haslett?file=%2Fsrc%2Fposts%2FPostCreate.tsx%3A150%2C22-150%2C40

Other information:

Environment

• React-admin version: 5.11.2
• Last version that did not exhibit the issue (if applicable):
• React version: 19.1.0
• Browser: Safari 17.5
• Stack trace (in case of a JS error):

[slax57]

Thanks for the report!

I believe react-hook-form's useFieldArray is responsible for this focus.

Looking at their docs, it seems they now support an additional focusOptions which we could leverage to make this focus optional.

We could imagine adding a disableAutoFocus prop, or a shouldFocus prop to <SimpleFormIterator> to provide this choice to the user.

Example usage:

    const addField = useCallback(
        (item: any = undefined) => {
            let defaultValue = item;
            if (item == null) {
                // ... redacted ...
            }
            append(defaultValue, { shouldFocus: false }); // here
        },
        [append, children]
    );

@fzaninotto @djhi wdyt?