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

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

@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);
  }
}

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

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 ?

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

I will take a look 😃