Bug: autoFocus broken inside <dialog />
facebook/react 21 comments 1mo ago
mediumopenScope: somewhat clearSkill match: maybeTest focusedReactJavaScriptTypeScript
Why this is a good first issue
The issue involves React's focus management within HTML dialog elements.
AI Summary
The issue describes a bug where `autoFocus` does not work correctly inside `<dialog />` elements when using React. The problem is reproducible and has a clear expected behavior based on HTML specifications. The fix likely requires understanding React's focus management and how it interacts with native browser behavior.
Issue Description
React version: 17 and 18.0.0-rc.0-next-27b569969-20220211
Steps To Reproduce
- render
<input /><input autoFocus />inside<dialog /> - execute the
showModal()method of the dialog - you will notice that react will not set focus to the correct input element
Link to code example:
https://codesandbox.io/s/dreamy-meninsky-460wbr?file=/src/App.tsx
The current behavior
In Chrome and Safari TP the element with autofocus="true" will receive focus.
However the element with autoFocus={true} will not receive focus.
The expected behavior
From the html-spec https://html.spec.whatwg.org/multipage/interaction.html#the-autofocus-attribute
The autofocus content attribute allows the author to indicate that an element is to be focused [...] as soon as the dialog within which it finds itself is shown
From https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
The au
GitHub Labels
Type: Bug
Want to work on this?
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!
Risk Flags
- requires understanding of React's focus management
- potential browser-specific behavior
Loading labels...
Details
Points10 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedyes