Vue-multiselect: [Bug] Cannot Shift+Tab out of searchable multiselect

[justrhysism]

Fiddle: https://jsfiddle.net/justrhysism/rrh1ddqL/1/

Tabbing forwards works as expected. Shift-tabbing backwards is being prevented.

_Note: This bug doesn't exist in beta.15 as I had to update the JSFiddle script source to the latest to demo the issue._

Putting the major accessibility issues aside - many people (especially devs) navigate forms using [Tab] and [Shift+Tab] so this regression is a deal-breaker.

[shentao]

Hey! Must have been a regression – it should have worked as before. Will fix in the coming days. Thanks! :)

[justrhysism]

Awesome, thanks @shentao!

[hsnali]

Hi @shentao, any progress on this one?

Not being able to Shift + Tab out of multiselect is a real accessibility killer.

Love your work otherwise.

[shentao]

Sorry, was very busy in the recent weeks. Planning to do a massive bugfixing this weekend so expect a release.

[skegel13]

I am using Vue 2.4.4 and Vue Multiselect 2.0.3 and I still have the issue when searching is enabled. Tab will not select an item and shift+tab will not go back to the previous input. Everything seems to be working properly if searching is disabled.

[havgry]

It's a huge issue in terms of accessibility and it's practically preventing me from using the searchable feature alltogether. I've submitted a PR.

[kanapka94]

This issue still exists :(

[priyankamantala]

Issue exists if multiselect is searchable then tabindex does not work

I m confused how it is working on this link - https://jsfiddle.net/7ma9xuvp/6/
because its not working for me..

[NailsonCodens]

the problem continues, killing the usability, did anyone find any solution? The multi-select owner does not seem to care much about this tab problem.

[jinfeicheng]

he problem continues, killing the usability, did anyone find any solution?

[vadym1930]

Was able to make this done in a dirty hacky way. Version: "vue-multiselect": "2.1.0".
Grabbed this trick from https://github.com/shentao/vue-multiselect/issues/401#issuecomment-425582096 and added more.

mounted () {
     this.$refs.typeahead.$el.setAttribute('tabindex', 0);
     this.$refs.typeahead.$el.addEventListener('keydown', this.addShiftTabBehavior);
},

beforeDestroy() {
    this.$refs.typeahead.$el.removeEventListener('keydown', this.addShiftTabBehavior);
},



md5-8c330d7d15f930f3827b1dfe96404ff5



// ashamed code goes here
/**
 * Enables shift+tab navigation
 * @param e {MouseEvent}
 * @returns void
 */
addShiftTabBehavior(e) {
    if(e.shiftKey && e.keyCode == 9) {
        this.$refs.typeahead.$el.setAttribute('tabindex', -1);
    }

    setTimeout(() => {
        this.$refs.typeahead.$el.setAttribute('tabindex', 0);
    }, 10);
},
/**
 * Gets focus after option selected back.
 * @returns void
 */
onSelected () {
    this.$nextTick(() => this.$refs.typeahead.$el.focus());
}

[leeniu]

Hey @vadym1930, the issue is fixed in the latest version 2.1.6

JSFiddle for reference: https://jsfiddle.net/leeniu/facskbwx/

EDIT: Added correct fiddle :)