react-component / react-component/dialog
autoFocus input not working within dialog
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 455
- Forks
- 206
- Avg merge
- 12m
- Merged PRs (30d)
- 1
Description
When using <input autoFocus /> within a modal the input will not be focused because the modal captures focus.
See library code examples or live examples
Appears to be due to focus capture implemented on first render https://github.com/react-component/dialog/blob/4f70824474b6988e79b8461341b37dce23ea19ff/src/Dialog/Content/Panel.tsx#L56
It might make sense to switch to dialog instead https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog as browser support is solid https://caniuse.com/?search=dialog
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading src/Dialog/Content/Panel.tsx at the linked focus-capture code, then compare the behavior with the docs/examples/ant-design.tsx example and its live demo. Done means an input with autoFocus receives focus inside a modal without breaking the modal's focus handling; the issue does not name a test file.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100