Vue-multiselect: IE11 Multiselect problem: cannot focus on input after blur without multiselect__select arrow

[ghost]

Hello!

I am using the Multiselect tagging object with the arrow "multiselect__select" invisible (display: none). All browsers are able to focus on my input box by clicking anywhere. However, in IE11, even in the examples in your website - like in https://vue-multiselect.js.org/#sub-tagging -, after inserting the first (or multiple) input and blurring, there is no way to focus back. The only way to focus on the input again is if:

1) the user deletes all inputs until the "multiselect__single" placeholder appears again;
2) or the user clicks on the "multiselect__select" arrow.

Since I am not working with the arrow, IE11 doesn't let me reselect the input unless I exclude all preselected tags :( But everything works fine on other browsers, including Edge. Apparently, IE depends on "multiselect__single" object to focus on the input. When it vanishes, there is no way to go back.

[rstuart85]

Hi,

I had a similar problem. In IE11, after 1 element is selected in a multiselect box, I can no longer give the multiselect focus. I think this is because IE will let the div element respond to a focus event and a child div of the multiselect component (in this case .multuselect_tags) is getting the focus event, not the outer div.

That is all a bit convoluted, but here is what I did as a temporary fix:

if (Utils.isIE() === true) {
  const outer = this.$el.querySelector('.search-select > div.multiselect')
  this.$el.querySelector('.multiselect__tags').addEventListener('focus', function () {
    outer.focus()
  })
  this.$el.querySelector('.multiselect__tags').addEventListener('blur', function () {
    outer.blur()
  })
}

To fix this at the library level, the @focus and @blur events need to be added to the multiselect_tags div.

Hope this helps.

[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.

[lqiang79]

To fix this issue will be really helpful for us.
please remove the wontfix label!!

[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.

[itsamaik]

+1, issue is still there.