Vue-multiselect: How I set tabindex?

[adrianoresende]

Very good this component multiselect.

I need to use tabindex to focus the fields in order but I did not find the documentation or issue that mentions it.
Could anyone how do I focus on that component when using tab?

This code :tabindex="searchable ? -1 : 0", note that an element with a negative tabindex is still focusable, it just cannot be reached using sequential focus navigation (i.e. tabbing).

[irelandpaul]

Adding a TabIndex prob would be great!

If you add tabindex to the component it applies it to the div it is in and not the input

[adrianoresende]

But i need number right to set tabindex and not -1

[shentao]

Changed the tabindex to 0 by default. You can also pass :tabindex prop. Will be released soon.

[vkatepalli]

I am trying to set Tab index for this. Could anyone help me on this.
```
style="border-radius:0px;"
:tabindex="3"
v-model="selected"
:options="options"
:multiple="true"
:close-on-select="false"
placeholder="Select Options">

[andreasvirkus]

Seems that tabindex on the wrapping div has reverted to -1.
<vue-multiselect :tabindex="0" ... /> renders:

<div tabindex="-1" class="multiselect" data-vv-name="label" data-vv-value-path="label" hide-selected="true">
  <!-- ... -->
</div>

Edit: sorry, looking at the source I now see that you can't add searchable in order for the tabindex prop to be respected. Could you provide some background for this choice/reason?
Edit2: Nope, seems I can't override the tabindex even when searchable prop isn't used. 🤔

[kanapka94]

@andreasvirkus I have the same problem. When searchable props is set to true, tabindex is automatically set to -1 and I cannot change it, by setting :tabindex="0"

[palamike]

The tabindex will set to -1 if searchable prop is set to true as @kanapka94 mention.

I add the following code in parent component mounted() to fix this issue..

  let el = this.$el.getElementsByClassName("multiselect")[0];  
  if (el) {  
    el.tabIndex = 0;  
  }

[andreasvirkus]

@palamike Yes, but seems it's also set to -1 even if you don't add the searchable prop or set it to false explicitly.

[jamesoshea]

It seems to be working (kind of) if you pass in a prop called tabIndex (note the camelcase). The correct tabindex gets rendered, but tabbing through only works until the multiselect element. Any further tabbing goes off somewhere else. Not sure if this still works if the searchable prop is set though.

[thomasaull]

Yes … exactely the same Problem here

[tinyfly]

in the source code :tabindex="searchable ? -1 : tabindex" So by default the tabindex will be -1 no matter what. Only if searchable is set to false will the tabindex option apply. I'm not sure why this is but it makes it so if I want a searchable field nothing is keyboard focusable.

You can get around this by setting a ref on the multiselect component

<multiselect ref="typeahead" @select="onSelected" ...></multiselect>

then in the mounted hook explicitly set the tabIndex using DOM methods

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

Also if you add a method for handling the select event you can focus the multiselect again after the user selects an item like so:

onSelected () {
  this.$nextTick(() => this.$refs.typeahead.$el.focus());
},

So @shentao I think this needs to be reopened and looked at further.

[kellym]

Until there's a solution, the easiest way I've found is to use a simple directive:

<multiselect v-tabindex></multiselect>

directives: {
  tabindex: {
    inserted(el) {
      el.setAttribute('tabindex', 0);
    }
  }
}

Using a directive means I don't need to worry about the component being rendered or not (i.e. if I use v-if logic).

[Ekkstein]

The solution with the directive when applied to radio- or file-select-inputs (the ones i tested) still only applies to the div, not the input element contained therein.
It will work with the ugly and probably fragile solution:

directives: {
  tabindex: {
    inserted(el) {
      el.children[0].setAttribute('tabindex', 0);
    }
  }
}