Vue-multiselect: Tabbing does not work to searchable multiselects

[enkrs]

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/

[shentao]

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.

[leovanhaaren]

Has this been fixed already? I'm facing the same issue but don't have time to investigate and/or make a PR for it. :(

[leovanhaaren]

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

[adam-lynch]

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?

[shentao]

Sadly most people who provide PRs do not add the required tests (nor run them). I merged some of the PRs today but haven’t yet fixed the tests. Once this is done I will be able to make a release to npm. :(

[leovanhaaren]

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

[leovanhaaren]

@shentao see above ^

[ScriptMint]

+1

[jclausen]

@shentao : Any word on when this bug fix will be released?

[TomFranssen]

I would also like to know when this will be released.

[johndatserakis]

Standing by for this - definitely a much needed feature.

[ricardobanegas]

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

[jclausen]

@ricardobanegas : That may be a final option - to lock in to 2.0.3 - if it looks like this won't be addressed in the near future. I would prefer to be able to take advantage of some of the tweaks and fixes in the 2.1.0 release, if at all possible. It's a great component so I'm not complaining. If that's what we need to do, long term, so be it.

[derekphilipau]

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

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

[hailwood]

Action still required.

[DM2489]

Definitely still required.

[wujekbogdan]

Is there any workaround for this issue? I've just downgraded Vue Multiselect to 2.0.8 and it seems to work fine, ~but I can't find any changelog, so I don't know what can possibly break because of the downgrade~. I found it: https://github.com/shentao/vue-multiselect/releases

[AndreaRavano]

+1

[rickyruiz]

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/

[wujekbogdan]

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

[rickyruiz]

@wujekbogdan With 2.1.2 there is no need for a workaround anymore, but I am not sure if it fixes shift+tab, I think it does not.

[wujekbogdan]

I think it does not

It does, but not always, I didn't find the rule yet. It seems to have something to do with the value of the input.

[trutherford2388]

@shentao, about when will the tabbing to select an option on vue-multiselect search options fix be released? I know you stated in 3.0, but when can we expect that to be released?

V/R
Travis L. Rutherford

[serakfalcon]

Guys, the issue is on line 3 of https://github.com/shentao/vue-multiselect/blob/master/src/Multiselect.vue
:tabindex="searchable ? -1 : tabindex"
IF searchable tabindex is -1. Not sure why this is a good idea. Should be
:tabindex="tabindex"
or if you want default to be -1 if searchable
:tabindex="(searchable && tabindex !== undefined) ? -1 : tabindex"

[themustafaomar]

Same issue here it didn't work for me :'(