Skip to content

Conversation

@AarishMansur
Copy link

@AarishMansur AarishMansur commented Dec 31, 2025

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant