Calling .focus() on a Custom Element with delegatesFocus fails when host is display:contents
Categories
(Core :: DOM: UI Events & Focus Handling, defect, P3)
Tracking
()
People
(Reporter: afrehner.work, Unassigned)
Details
Steps to reproduce:
This codepen should show a red outline when the custom element and/or its children receives focus. This works in Safari and Chrome, but not FF.
https://codepen.io/afrehner/pen/JoYqLyb
You can also validate this by using the devtools and calling $0.focus() and then checking document.activeElement; in FF the activeElement is not the custom element.
This seem to ONLY be broken when the :host has a display:contents style on it. If you remove that, then everything works.
Actual results:
FF does not focus the custom element.
Expected results:
FF focuses the custom element, and styles are applied.
|
||
Comment 1•2 months 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.
|
||
Updated•1 month ago
|
|
||
Comment 2•16 days ago
|
||
It's not only when calling .focus(). If the custom element is a form associated element with delegatesFocus: true and display: contents for which there is a <label> on the page, the custom element is not focusable by the label. That is, in this situation the focus is not delegated to the first focusable element within the shadow tree. When removing display: contents everything works.
Description
•