| Summary: | Custom element with delegatesFocus does not focus if inner element is not first child | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Elizabeth Mitchell <lizmitchell> | ||||
| Component: | DOM | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | RESOLVED INVALID | ||||||
| Severity: | Normal | CC: | mike, rniwa, webkit-bug-importer | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari 16 | ||||||
| Hardware: | Mac (Apple Silicon) | ||||||
| OS: | macOS 13 | ||||||
| URL: | https://jsbin.com/ranuvuhiri/edit?html,output | ||||||
| Bug Depends on: | |||||||
| Bug Blocks: | 148695 | ||||||
| Attachments: |
|
||||||
Hm... the focus is set. We're somehow not applying :focus rule, however. Created attachment 470649 [details]
Reduction
Oh, the issue is simply that x-button becomes width 0px because it's a display: inline. If you set display: block on x-button or replace div with span, the dotted red line renders correctly. Note that buttons are not focusable by mouse clicks on Apple platforms by default. If you want to make a button focusable, set tabindex=0 on button elements. As such, this is behaving correctly. |
A custom element with `delegatesFocus: true` does not correctly delegate focus if the first child of the custom element's shadow DOM is not focusable. This is common with wrapper divs and styling. ``` <!-- Does not delegate focus correctly --> <x-button> #shadow-root <div class="style"> <button><slot></slot></button> </div> </x-button> <!-- Delegates focus correctly --> <x-button> #shadow-root <button><slot></slot></button> </x-button> ``` See https://jsbin.com/ranuvuhiri/edit?html,output and click on "Focus button" Expected: custom element button is focused Actual: button is not focused Tested in Safari 16.6 on MacOS 13.5