Wrong activeElement in focus in IE11

Question

In IE11 span element is in a focus state ( document.activeElement returns span ), but it element hasn't tabindex attribute and shouldn't be in focus.

Works fine in Chrome and Firefox (after click in focus div element with tabindex attribute). The problem only in IE11. BTW, cannot reproduce this issue on the jsbin.

http://i.stack.imgur.com/2qdmJ.png

I also don't see span in a list of elements that can get focus.

Is it a known problem? How to make div with tabindex as an activeElement after clicking on the span?

http://msdn.microsoft.com/en-us/library/ms536934.aspx

Answer 1

Finally I found that it's unexpected behavior in IE11 and possible bug if span has display: flex . Chrome and Firefox after click on span return div and IE returns span .

Check snippet for details. Reported on caniuse and probably should be added to IE tracker.

 document.getElementById('d').addEventListener('click', function() { alert('active element is ' + document.activeElement); }); 

 #d { display: flex; } span { display: -ms-flex; display: flex; } 

 <div id='d' tabindex="1"> <div> <span>span</span> </div> </div>