1727964 - `HTMLElement.blur()` can not cancel all the focus in sub tree

Status: UNCONFIRMED

(Core :: DOM: UI Events & Focus Handling, defect, P3)

Description

[709922234]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:93.0) Gecko/20100101 Firefox/93.0

Steps to reproduce:

visit: https://codepen.io/mantou132/pen/PomMMbj

document.body.innerHTML = `
  <my-ele>
    <div tabindex=1>foucesable</div>
  </my-ele>
`
document.querySelector('div').focus();
document.querySelector('my-ele').blur();
document.body.append(`current active element: ${document.activeElement.tagName}`);

Actual results:

current active element: DIV

Expected results:

current active element: BODY

Comment 1

[Edgar Chen [:edgar] (OOO ~ 07/13, 07/16 ~ 07/20)]

Firefox 71 behaves the same and Chome and Edge also behave the same.
However, Safari reset the focus to Body.

Comment 2

[709922234]

In custom elements, it is useful to be able to cancel the focus of the sub tree, for example:

<my-form>
    #shadow-root
    <form-item>
      #shadow-root
        <input>
    <form-item>
<my-form>

Comment 3

[Hsin-Yi Tsai (she/her)[:hsinyi]]

Chrome changed their behavior that they reset the focus to Body as Safari. We still need to see what the spec says.

Comment 4

[709922234]

Attachment: image.png

left: Chrome, right: Firefox

Comment 5

[Sean Feng [:sefeng211]]

Clear my NI given I won't be able to work on this