Skip to content

Allow disabling auto focusing the first input of newly added row with <SimpleFormIterator disableAutoFocus> - #11101

Merged
slax57 merged 5 commits into
marmelab:nextfrom
AarishMansur:fix/simpleformiterator-disable-autofocus
Jan 6, 2026
Merged

Allow disabling auto focusing the first input of newly added row with <SimpleFormIterator disableAutoFocus>#11101
slax57 merged 5 commits into
marmelab:nextfrom
AarishMansur:fix/simpleformiterator-disable-autofocus

Conversation

@AarishMansur

@AarishMansur AarishMansur commented Dec 31, 2025

Copy link
Copy Markdown
Contributor

Problem

SimpleFormIterator always focuses the first input of a newly added item because it relies on react-hook-form’s useFieldArray.append, which auto-focuses by default.

This happens even when inputs explicitly do not request focus, making it impossible to opt out of this behavior (e.g. when adding multiple rows quickly or when focus management is handled elsewhere).

Solution

This PR introduces a new optional prop: disableAutoFocus on SimpleFormIterator.

When enabled, the iterator passes { shouldFocus: false } to react-hook-form’s append method, preventing automatic focus on newly added items.

Default behavior remains unchanged.

The change is fully opt-in.

Focus control is handled at the iterator level, which is the correct abstraction for this behavior.

How To Test

Run Storybook:

npx storybook dev

Open the SimpleFormIterator stories

Open the story demonstrating disableAutoFocus

Click Add

  • A new item is added without any input receiving focus

Compare with the default story

  • Default autofocus behavior is preserved

Focus behavior can be verified visually or by inspecting document.activeElement in browser dev tools.

Additional Checks

  • The PR targets next for a feature
  • The PR includes unit tests (focus behavior is difficult to reliably assert in jsdom; behavior was verified via Storybook)
  • The PR includes one or several stories
  • The documentation is up to date (no documentation changes required)
    Also, please make sure to read the contributing guidelines.

@slax57
slax57 self-requested a review January 5, 2026 09:40

@slax57 slax57 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are a couple additional changes required to complete this PR, but this is a welcome contribution. Thanks!

Comment thread packages/ra-core/src/controller/input/SimpleFormIteratorBase.stories.tsx Outdated
Comment thread packages/ra-core/src/controller/input/SimpleFormIteratorBase.stories.tsx Outdated
Comment thread packages/ra-core/src/controller/input/SimpleFormIteratorBase.tsx
@slax57 slax57 changed the title fix(SimpleFormIterator): add disableAutoFocus option when adding items Allow disabling auto focusing the first input of newly added row with <SimpleFormIterator disableAutoFocus> Jan 6, 2026

@slax57 slax57 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@slax57 slax57 added this to the 5.14.0 milestone Jan 6, 2026
@slax57
slax57 merged commit 8054cc7 into marmelab:next Jan 6, 2026
12 of 14 checks passed
@AarishMansur
AarishMansur deleted the fix/simpleformiterator-disable-autofocus branch January 6, 2026 08:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants