Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

document.activeElement in Microsoft Edge

See original GitHub issue

What problem does this feature solve?

There is a bug in the current version of Microsoft Edge that causes an “Unspecified error” when accessing document.activeElement inside an iframe. There are two calls accessing activeElement in vue’s code base. One of them is triggering the MS Edge issue in one of my projects. I believe this issue was introduced here: https://github.com/vuejs/vue/commit/be9210fc78339ba1fb543160a4b18e8fc444ca68#diff-7cb22b67c6250cfa775a3cfb6471b700R60

I reported the MS Edge bug to Microsoft and they are going to release a fix in a future release. See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12733599/. In the meantime,I was wondering if you could wrap the .activeElementent calls in a try / catch as a work around.

It seems like IE has had similar issues in the past. The snippet in the sample code I provided in this issue is based on a workaround implemented by JQuery UI. See: https://www.tjvantoll.com/2013/08/30/bugs-with-document-activeelement-in-internet-explorer/. I wouldn’t be surprised if similar issues are still lurking on other MS browsers.

Implementing this workaround in vue will help to avoid this issue on current MS Edge (or other MS browser versions with similar issues).

What does the proposed API look like?

var activeElement;
try {
    activeElement = document.activeElement;
} catch( error ) {
    activeElement = document.body;
}

Issue Analytics

State:
Created 6 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

benviruscommented, Jul 19, 2017

MS IE9\10\11 has the same issues.

I prefer to write like this:

try {
    return document.activeElement !== elm && elm.value !== checkVal
} catch (e) {
    return true;
}

I have test it and work fine.

0reactions

atoacommented, Jul 19, 2017

I tried a few simple Vue examples but I am unable to trigger the bug with a minimal app. It is hard to isolate/replicate the state that triggers it from my application because there is no JavaScript stack trace. The browser just croaks with a general error in the console with a console link to the code that causes it (which points to this function). You should be able to see that in the first repro link I posted.

If you are interested, I am pasting here the simple html (no Vue code) code which I used in the MS bug report. Other than that and the link I provided above, I am sorry I can’t provide a more targeted repro.

index.html:

<html>
<iframe src="./iframe.html"></iframe>
</html>

iframe.html:

<html>
  <script>
    console.log('xxx', document.activeElement );
  </script>
</html>

Top Results From Across the Web

Track which element has focus - Microsoft Edge Development

Open the Console, create a Live Expression, and set the expression to document.activeElement.

Document.activeElement - Web APIs | MDN

The activeElement read-only property of the Document interface returns the Element within the DOM that currently has focus.

HTML DOM Document activeElement Property - W3Schools

Definition and Usage. The activeElement property returns the HTML element that have focus. The activeElement property is read-only.

Mutating the active element - ally.js

The "active element" refers to the DOM element that currently has focus. It is accessible through the DOM property document.activeElement and can be...

Bugs with document.activeElement in Internet Explorer

If you call document.body.blur() in IE9 or IE10, you will switch application windows. Yes you again read right; if you have IE and...