Skip to content

Instantly share code, notes, and snippets.



Last active Feb 11, 2016
What would you like to do?
HTML focus events

Testcase (read the console log):

input.focus() runs

None of the special cases apply, so we just run focus update steps with the focus chains old chain and new chain.

This part is tricky to follow, but my reading of the spec is that, in our particular case:

old chain = [body, Document]
new chain = [input, Document]

(2) If the last entry in old chain and the last entry in new chain are the same, pop the last entry from old chain and the last entry from new chain and redo this step.

In our case, Document is the last entry in both chains, so we pop it off to yield:

old chain = [body]
new chain = [input]

And then the relevant part of the rest of the algorithm is to iterate over the old chain and fire blur events, and later iterate over the new chain and fire focus events.

(5)(3) If entry is a Document object, let focus event target be that Document object's Window object.

This doesn't affect us since we popped off the Document object above, but this retargeting will become relevant in a moment.

So, there should be exactly 1 focus event, targeted at <input>.

However, only IE11/Edge actually do that. Other browsers fire additional focus events at other targets:

// Safari/Chrome:                       [<input>] (Per spec(?!))
// Edge                         [window, <input>] (If we hadn't popped off Document in step (2) above, this would be correct)
// Firefox:           [document, window, <input>] (Blatantly wrong per step (5)(3); see

So my question was whether the spec is wrong or Edge+Firefox are wrong, with respect to firing focus at window.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment