2050985 - autofocus in <dialog> doesn’t work when <dialog> is in shadow DOM and autofocus element is slotted in

Status: UNCONFIRMED

(Core :: DOM: Core & HTML, defect, P3)

Description

[Zacky Ma]

Steps to reproduce:

Given this structure:

<my-dialog>
  <template shadowRootMode="open">
    <dialog>
      <slot></slot>
    </dialog>
  </template>
  <input autofocus>
</my-dialog>

Call showModal() on the <dialog> element in the shadow DOM.

Actual results:

<input> element doesn’t get automatically focused.

Expected results:

<input> element should get automatically focused.

More test cases can be found here: https://codepen.io/marchbox/pen/PwbRmXE?editors=1000

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Olli Pettay [:smaug][[e-mail]]]

Would be nice to have a minimal testcase attached to this bug.

Leo, you looked at some focus issues recently. Want to take a look one hopefully small dialog + autofocus issue :)

Comment 3

[Olli Pettay [:smaug][[e-mail]]]

Zacky, can you possibly provide a link to the relevant section of HTML spec dictating the behavior you expect?
https://html.spec.whatwg.org/

I couldn't immediately find what in the spec would require going to the slotted elements, but maybe I missed something.

Comment 4

[Leo Tenenbaum [:ltenenbaum]]

I think the reporter's expected behaviour here is what the spec is asking for, since focus-delegate should look at descendant = <slot> in step 6, and get-the-focusable-area should probably return the <input> when focus target is the <slot>, because of

If focus target is an element with one or more scrollable regions that are focusable areas
Return the element's first scrollable region, according to a pre-order, depth-first traversal of the flat tree.

(Well, "an element with" is pretty vague, but it makes sense for it to include the slotted element in the case of <slot>)

Comment 5

[Leo Tenenbaum [:ltenenbaum]]

Hmm no we actually focus the dialog in this case because of step 6.2 of focus-delegate… I think the spec is quite unintuitive here (autofocus-delegate is supposed to just look at the DOM tree, although Chrome seems to use the flat tree), so I'll file an issue about it: https://github.com/whatwg/html/issues/12649

Comment 6

[Zacky Ma]

FWIW, Firefox’s behavior is currently the same as Safari, and Chromium is different in stable, but the same as Firefox and Safari in Canary now: https://issues.chromium.org/issues/528332887