260480 2023-08-21 12:46:24 -0700 Custom element with delegatesFocus does not focus if inner element is not first child 2024-03-28 15:28:13 -0700 1 1 1 Unclassified WebKit DOM Safari 16 Mac (Apple Silicon) macOS 13 RESOLVED INVALID https://jsbin.com/ranuvuhiri/edit?html,output InRadar P2 Normal --- 148695 1 lizmitchell webkit-unassigned mike rniwa webkit-bug-importer oldest_to_newest 1972458 0 lizmitchell 2023-08-21 12:46:24 -0700 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 1974002 1 webkit-bug-importer 2023-08-28 12:47:14 -0700 <rdar://problem/114580905> 2024568 2 rniwa 2024-03-28 15:10:54 -0700 Hm... the focus is set. We're somehow not applying :focus rule, however. 2024571 3 470649 rniwa 2024-03-28 15:15:25 -0700 Created attachment 470649 Reduction 2024575 4 rniwa 2024-03-28 15:27:55 -0700 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. 470649 2024-03-28 15:15:25 -0700 2024-03-28 15:15:25 -0700 Reduction delegates-focus.html text/html 667 rniwa PCFET0NUWVBFIGh0bWw+CjxzdHlsZT4KICA6Zm9jdXMgewogICAgYmFja2dyb3VuZDogZ3JlZW47 CiAgfQo8L3N0eWxlPgo8YnI+Cjx4LWJ1dHRvbiBpZD0iYnV0dG9uMSI+CiAgPHRlbXBsYXRlIHNo YWRvd3Jvb3Rtb2RlPSJvcGVuIiBzaGFkb3dyb290ZGVsZWdhdGVzZm9jdXM9InRydWUiPgogICAg PGRpdj48aW5wdXQ+PHNwYW4gb25jbGljaz0ic2V0VGltZW91dCgoKSA9PiBidXR0b24xLnNoYWRv d1Jvb3QucXVlcnlTZWxlY3Rvcignc3BhbicpLnRleHRDb250ZW50ID0gZG9jdW1lbnQuYWN0aXZl RWxlbWVudCA9PSBidXR0b24xID8gJ1BBU1MnIDogJ0ZBSUwnLCAwKSI+Y2xpY2sgaGVyZTwvc3Bh bj48L2Rpdj4KICA8L3RlbXBsYXRlPgo8L3gtYnV0dG9uPgo8eC1idXR0b24gaWQ9ImJ1dHRvbjIi PgogIDx0ZW1wbGF0ZSBzaGFkb3dyb290bW9kZT0ib3BlbiIgc2hhZG93cm9vdGRlbGVnYXRlc2Zv Y3VzPSJ0cnVlIj4KICAgIDxpbnB1dD48c3BhbiBvbmNsaWNrPSJzZXRUaW1lb3V0KCgpID0+IGJ1 dHRvbjIuc2hhZG93Um9vdC5xdWVyeVNlbGVjdG9yKCdzcGFuJykudGV4dENvbnRlbnQgPSBkb2N1 bWVudC5hY3RpdmVFbGVtZW50ID09IGJ1dHRvbjIgPyAnUEFTUycgOiAnRkFJTCcsIDApIj5jbGlj ayBoZXJlPC9zcGFuPgogIDwvdGVtcGxhdGU+CjwveC1idXR0b24+Cg==