HTMLDialogElement.prototype.showModal will sometimes focus an element with tabindex="-1"
Categories
(Core :: DOM: UI Events & Focus Handling, defect)
Tracking
()
People
(Reporter: emarquez, Unassigned)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
Steps to reproduce:
Focusable elements inside shadowroots inside HTMLDialogElement will not be automatically focused by the default .showModal behavior on dialog. Additionally, elements that are normally focusable are focused by dialog even if they have tabindex=-1 set on them
- create a dialog element
- place a node inside the dialog
- attach a shadow root to that node
- put an input / focusable element in that node
- call dialog.showModal() on the dialog
repro:
https://lit.dev/playground/#gist=da75d775e403d70a81f7ca712f602d95
Behavior is the same on both blink and webkit and reproducible on stable and nightly
Actual results:
focusable elements inside the dialog are not focused and buttons with tabindex=-1 are focused
Expected results:
the input should be focused and anything with tabindex=-1 should not be focused
|
||
Comment 1•1 year ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::DOM: UI Events & Focus Handling' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•1 year ago
|
||
I believe the behavior with regard to the shadow root is correct. In order to focus that element, you would need to do something like set its delegatesFocus property to true, so it would delegate focus to its child <input> element, or set a tabindex attribute on it, so that it would become focusable itself.
Focusing the element with tabindex="-1" does appear incorrect per my reading of the spec. It would be good to fix that, but I also don't expect it to cause much trouble in the wild, especially for people who follow the best practice of marking an explicit "autofocus" element.
Description
•