document.activeElement in Microsoft Edge

[atoa]

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:
be9210f#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;
}

[posva]

If it's a bug on Edge that is going to be fixed soon, there's no reason for us to add a workaround in the meantime. It's much easier for you to use a patched version in the meanwhile 🙂
If it does break on IE9, then there's something we can do. Could you provide a repro using Vue please?

[benvirus]

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.

[atoa]

Hi @posva,

Thanks for looking into this. The following link triggers the issue on Edge:
https://lex-web-ui-pipeline-19w5krrubl3c-parentpagebucket-my32cfmn444n.s3.amazonaws.com/static/iframe/index.html

My project is not supported on IE (and I don't have quick access to a machine with it). The link above might not even trigger the code path on IE as it may fail to load earlier. It sounds like @benvirus has reproduced it on IE so maybe he can provide a link or sample code.

I can monkey patch using @benvirus snippet until the change is pushed to Edge. I'll leave it up to you to implement it as a workaround for IE. That being said, I would not be surprised if this is also an issue in IE since a quick google search returns a long history of .activeElement issue in MS browsers.

[posva]

I mean a minimal repro, you can use this: http://jsfiddle.net/posva/wsr78d2w/

[atoa]

I am unable to reproduce it in jsfiddle. Not sure why but I suspect that it may be related to the how jsfiddle wraps the document around yet another iframe that is dynamically loaded. So the order of how things are evaluated and the state of document.activeElement inside an iframe seems hard to predict in there.

Triggering the MS Edge bug outside of Vue is trivial. Basically accessing document.activeElement inside an iframe. There is a very minimal repro in the report I filed with MS: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12733599/

I am OK with this feature request being rejected. It is a MS bug after all. I thought it wouldn't hurt to ask for a workaround. I am happy to dive deeper if you need me, but feel free to close this ticket if implementing this workaround doesn't look like a priority. I wouldn't blame you if you reject it 😄

Thanks

[posva]

Oh, don't worry, a simple html file is enough. Well, if the bugs affects IE9, it does matter 😅

[atoa]

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>