vue-multiselect: Tabbing does not work to searchable multiselects

The recent “Improve the singleLabel slot feature” commit - Multiselect.vue line 35 introduces a regression for issues #411 , #515 and similar. With this shift-tabbing and even tabbing to searchable multiselects does not work anymore.

This is because v-show on <input sets style="display: none" on the DOM element. Such elements ignore tabindex in the browser.

In earlier commits “Set tabindex on input instead of container if searchable” I can see that there have been attempts to avoid “display: none”.

I’ve made this fiddle to reproduce it. Pushing Tab on the keyboard from first input should jump to multiselect. This is working with 2.0.8 libs, but not 2.1.0 libs:

https://jsfiddle.net/rjr8n2oc/1/

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 36
Comments: 26 (2 by maintainers)

Commits related to this issue

Fix broken tabbing behavior (#685, #411, #515) — committed to sigerello/vue-multiselect by deleted user 6 years ago

Most upvoted comments

Workaround:

Create a computed property that returns an object which overrides the tabindex attribute.

computed: {
  override() {
    return {
     tabIndex: 0,
    }
  },
},

Then use v-bind:

<multiselect
  v-model="value"
  :options="options"
  v-bind="override"
 />

Demo: https://jsfiddle.net/rickyruizm/uc5sfL7e/

+13

rickyruiz on Aug 24, 2018

@rickyruiz Thanks for the workaround, but unfortunately it’s not perfect. It works only if you move forward with tab, but it doesn’t work if you try to go backwards with shift+tab.

wujekbogdan on Sep 21, 2018

Action still required.

hailwood on Aug 12, 2018

@shentao Did you already find time to do this or is there anything you need help with?

leovanhaaren on May 25, 2018

Ah I see that the fix for it has been merged into master but a new release hasn’t been created yet. Is it possible to release an package update to npm @shentao ?

It’s this commit that I’m after; https://github.com/shentao/vue-multiselect/commit/65b989501aae3b7b29ef441271392929f7065480

leovanhaaren on May 3, 2018

Thanks for reporting! This is a serious problem. 😕 With the current event architecture it’s quite easy to break such things – that’s why the 3.0 is so needed. Will try to fix this issue during the weekend. If someone can do this sooner, I will gladly accept the PR.

shentao on Mar 22, 2018

@ricardobanegas Just downgraded to 2.0.3 and it seems to be working fine. Thanks for the tip.

derekphilipau on Jul 13, 2018

I downgraded to "vue-multiselect": "2.0.3" and everything works beautifully.

ricardobanegas on Jul 10, 2018

Standing by for this - definitely a much needed feature.

johndatserakis on Jul 10, 2018

The test suite failed to run on CircleCI for that commit https://circleci.com/gh/shentao/vue-multiselect/360?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link. Maybe that’s why it wasn’t published?

adam-lynch on May 14, 2018