Vue-multiselect: Inconsistent where to click for focus in IE11

[304NotModified]

In IE11 the Vue multiselect is behaving differently compare to other browsers (Firefox, Chrome, Edge).

In Firefox, Chrome & Edge you can click in the whole box to give the element focus.

In IE11 only clicking in the <input> is giving the element focus, which is a lot smaller. This confused the users as they think the box is read-only

Demo: https://jsfiddle.net/shentao/c4L3gs91/

v2.0.0-beta.14

related: https://github.com/monterail/vue-multiselect/issues/379

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[304NotModified]

bump then

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[304NotModified]

There is a demo, a fiddle, and a clear description. What else can I do?

[shentao]

The issue is highly related to how 2.0 is structured. I think the 3.0 version should be free from those issues. You can check it out using the v3 branch.

[304NotModified]

OK thanks, I will

[304NotModified]

Is there a fiddle or a package somewhere for v3?

[shentao]

Not yet. Some parts of the component haven’t yet been completed since there is a pending issue within Vue core that makes the code throw invalid warnings. :(
To try it out you have to checkout to the branch and run it locally.

[dobromir-hristov]

I am on Windows, should i try to fix the IE issue or leave it as 3.0 fixes it?

[304NotModified]

I prefer fix, as 3.0 far from RTM

[dobromir-hristov]

I will take a look :)

[dobromir-hristov]

I cannot reproduce the problem. I click everywhere and it works alright.

jsfiddle was not working for me in ie11 so I recreated a codepen. Btw 90% of the editors like that dont support ie11 hah... not that i can blame them.

https://codepen.io/dobromir/full/aaBpzb/

[francoismassart]

I can confirm that the issue is still there, you can see it in the very first demo of this page:

https://vue-multiselect.js.org/

Steps to reproduce in IE11:

1. Click anywhere o/ and select any tag
2. Then the only way to get focus is to click on the toggle button on the right... or to delete the present tag.

I can check for a fix or will this get fixed in 3.0 ?

[francoismassart]

A quick and dirty way to fix this, is to apply some additional CSS code only for IE11 which spread the .multiselect__select width to 100%...

[Kakoen]

@304NotModified
We could work around this issue in vue-multiselect 2.x by defining onclick on a div wrapping the multiselect, which focuses the input field, triggering the dropdown:

<div onclick="this.querySelector('input').focus();">
    <multiselect ...></multiselect>
</div>

You could even define the onclick event on the multiselect element itself.

[victor-ponamariov]

Confirm that this bug exists.

Setting .multiselect_select width to 100% did not help. The solution with onclick handler worked, however, I think that the placeholder and input width should be stretched to 100% and take the whole component space, since when I hover the component somewhere I got text cursor, somewhere pointer which looks ugly.

Plus, when you type a really long text when searching something, the input area is actually quite small which is not nice I think

[mihai-macaneata]

I found a css only hack/solution for this problem

/* ie11 fix start */
.multiselect__placeholder {
  width: 100%;
}

body .multiselect__select {
  text-align: right;
  width: 100%;
  height: 100%;
  transition: none;
}

/* we use scale(1, -1) to flip the caret vertically since rotate no longer works,
 because of width and height 100% */
body .multiselect--active .multiselect__select{
  transform: scale(1, -1);
}
/* ie11 fix end */


/* reset to initial values for modern browsers since ie11 doesn't know @supports */
@supports (height: unset) {
  body .multiselect__select {
    text-align: right;
    width: 40px;
    height: 38px;
    transition: .2s ease, -webkit-transform .2s ease
  }
}

It's not the most elegant solution, but we're working with IE here.
There's no point trying to clean toilets while wearing a tuxedo

[bf]

@mihai-macaneata Thank you so much. I can confirm that this fix works. Fuck Internet Explorer.

[dvasyliev]

@mihai-macaneata Thank you, it works!
Also, you can use -ms-high-contrast: none which supports only IE11+ browsers

@media all and (-ms-high-contrast: none) {
  .multiselect__placeholder {
    width: 100%;
  }

  .multiselect__select {
    width: 100%;
    height: 100%;
    text-align: right;
    transition: none;
  }

  .multiselect--active .multiselect__select {
    transform: scale(1, -1);
  }
}