1545573 - During blur handler, document.activeElement returns the body element when iframe contents are focused

Status: NEW

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

Description

[Osmose [:osmose, :mkelly]]

Demo available here: https://iframe-activeelement-test.glitch.me/

STR:

1. Load the demo page above and open the JS console.
2. Click anywhere outside of the iframe on the page and observe that the body element is logged as the active element.
3. Click within the iframe.

Expected: The iframe element is logged as the active element.

Actual: The body element is logged as the active element.

---

The iframe is successfully logged as the active element in Chrome 73 and unsuccessfully in the Nightly 68. Note that if you check the value of document.activeElement in the console after clicking within the iframe, it is correctly set to the iframe element.

So the question is: When should activeElement be set with relation to event listeners? The use case for setting it before the blur event is that it lets a page detect that a user clicked within an iframe from the containing page. On Glitch we want this so we can dismiss popover windows when the user clicks within the iframe showing a preview of their app.

The only other alternative I've seen around online is tracking mouseover events for the iframe and detecting a blur event when the mouse is over the iframe, which is super meh.

Comment 1

[Henri Sivonen (:hsivonen)]

Is this our bug or Chrome's bug spec-wise?

Comment 2

[Anne (:annevk)]

My reading of https://html.spec.whatwg.org/#focus-update-steps suggests that blur is dispatched, then the focused area is updated (which is what activeElement returns, in some fashion), then focus is dispatched.

So Firefox matches the standard, but perhaps it should be changed in some manner then.

(I was curious if this only happened for cross-origin frames in Chrome. That's not the case. Also happens same-origin and for input elements and such.)

Comment 3

[siarhei_simanovich]

I have the same issue, but I know that there is gap between blur and focus events. In chromium I'm able to catch correct active element in 250ms timeout delay. In Firefox even 1s timeout delay still return me body element as active. Something is definitely wrong.

http://jsfiddle.net/serejkasimanovich/dq16tnxw/