Skip to content

[DOM] Preserve autofocus for controls inside dialogs - #37328

Open
bestmaa wants to merge 1 commit into
react:mainfrom
bestmaa:fix/dialog-autofocus-23301
Open

[DOM] Preserve autofocus for controls inside dialogs#37328
bestmaa wants to merge 1 commit into
react:mainfrom
bestmaa:fix/dialog-autofocus-23301

Conversation

@bestmaa

Copy link
Copy Markdown

Summary

Fixes#23301.

React implements autoFocus on client-created controls by calling focus() during commit and omitting the native autofocus attribute. That call has no effect while a parent dialog is closed, so opening the dialog later lets the browser focus the first focusable control instead.

This change:

  • preserves the native autofocus attribute for button, input, select, and textarea elements inside a dialog;
  • keeps the attribute synchronized when the autoFocus prop changes;
  • leaves existing behavior outside dialogs and during hydration unchanged.

The logic lives in the DOM host config so dialog-specific behavior stays out of the reconciler.

How did you test this change?

  • yarn test ReactDOM-test ReactDOMComponent-test ReactServerRenderingHydration-test --runInBand — 208 tests passed in experimental development mode
  • yarn test-stable ReactDOM-test ReactDOMComponent-test ReactServerRenderingHydration-test --runInBand — 208 tests passed
  • yarn test ReactDOM-test ReactDOMComponent-test ReactServerRenderingHydration-test --prod --runInBand — 208 tests passed
  • yarn linc
  • yarn flow dom-browser
  • yarn prettier
  • Docker clean-room runs with Node 20.19.0 and Yarn 1.22.22
  • React DOM bundle verified with Playwright in Chromium, Firefox, and WebKit: after dialog.showModal(), the control with autoFocus became document.activeElement

@meta-cla

meta-claBot commented Aug 20, 2026

Copy link
Copy Markdown

Hi @bestmaa!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

@meta-cla

meta-claBot commented Aug 20, 2026

Copy link
Copy Markdown

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

@dianatofficialdianatofficial left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Approved. The fix is minimal and correct.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug: autoFocus broken inside <dialog />

2 participants

@bestmaa@dianatofficial