IE11 - Bootstrap components not working with Vue.js and Virtual keyboard

Mottie / Keyboard

Virtual Keyboard using jQuery ~

http://mottie.github.io/Keyboard/

Other

1.78k stars 723 forks source link

IE11 - Bootstrap components not working with Vue.js and Virtual keyboard #746

Closed downace closed 5 years ago

downace commented 5 years ago

Not sure if this is caused by Virtual Keyboard, maybe the root cause is somewhere else..

https://codepen.io/downace/pen/orMVNM?editors=1010

Bug happens only when you click on any Bootstrap component first. After clicking somewhere else (even on another "broken" component) everything starts working.

It also works fine if you:

Disable keyboard: by removing first input (HTML, L1) or keyboard() call (JS, L4) or
Move Vue root (#vue-app) out of tab pane (HTML, L21-26) or
Disable Vue mounting: by removing el option (JS, L7) or removing new Vue call or
Remove button from #vue-app (HTML, L24) or replace it with non-form element (e.g. div) or
Use Chrome/Firefox

Mottie commented 5 years ago

Hi @downace!

Did you know that CodePen doesn't work in IE11? Even after closing this modal...

I don't know Vue, so maybe try asking this question on Stack Overflow. But here are also a few suggestions:

Include jQuery migrate.
Instead of using this plugin directly, use Vue-virtual-keyboard which is a version of this plugin that is specifically built for Vue.
Use bootstrap vue instead of plain bootstrap.
What happens if Vue is the first thing that is loaded?

downace commented 5 years ago

Hi!

I use "Debug mode" in Codepen: just open it in normal browser, copy link and open in IE. But it is only available for pen owner, so you need to fork... BTW, can you suggest a sandbox that will work in IE?

Include jQuery migrate.

Same result

Instead of using this plugin directly, use Vue-virtual-keyboard which is a version of this plugin that is specifically built for Vue.

Use bootstrap vue instead of plain bootstrap.

Not suitable for my case: Vue is used inside the Bootstrap tab, the input with virtual keyboard is also outside of the Vue scope. I think that this is very rare case...

What happens if Vue is the first thing that is loaded?

When I swap the .keyboard() call and the Vue mounting, it works. I will use this as a workaround, thanks for suggestion!

Maybe I'll investigate further to find the initial cause of the problem and post here if I find something useful

Thanks for help!