Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

document.activeElement in Microsoft Edge #6157

Closed
atoa opened this issue Jul 18, 2017 · 7 comments
Closed

document.activeElement in Microsoft Edge #6157

atoa opened this issue Jul 18, 2017 · 7 comments

Comments

@atoa
Copy link

atoa commented Jul 18, 2017

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
Copy link
Member

posva commented Jul 18, 2017

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
Copy link

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
Copy link
Author

atoa commented Jul 19, 2017

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
Copy link
Member

posva commented Jul 19, 2017

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

@atoa
Copy link
Author

atoa commented Jul 19, 2017

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
Copy link
Member

posva commented Jul 19, 2017

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

@atoa
Copy link
Author

atoa commented 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>

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

No branches or pull requests

3 participants