Vue-multiselect: Select on tab?

[paulstraw]

Thanks so much for the super well-done library. I did a bit of digging on this, but wasn't able to find anything. I'd like to make it so when a user tabs away from the field, the option they have highlighted is selected.

Have I just missed an option somewhere? If not, would you like me to put together a PR for this functionality?

[shentao]

Hey! :) Thanks! Added the functionality just now. I will release the version somewhere around Wednesday, as I want to finally work on the other issues.

[paulstraw]

Oh wow! Awesome, thanks so much for the quick response + addition.

[shentao]

Finally published and available in v1.1.3!

[paulstraw]

Just tried this, but there doesn't seem to be a way to disable this behavior (e.g. for multiselects)? It also selects when using shift-tab, which probably shouldn't be the case.

[shentao]

Good catch! Solving the problem of shift+tab should be easy. Disabling or altering the behavior for key events would be a bit problematic though.

[shentao]

Sorry it’s so late.
Done in beta.11.

[stwic]

This doesn't seem to work anymore. What's the status and are there any workarounds to make the tab selection work?

[SamuelSchwegler]

I am also searching for a workaround / solution.

[nicoloko002]

I am also searching for a workaround / solution.

try this:

$(document).on('keydown', '.multiselect', function(event) { // watch for keydown events on elements with class multiselect
   if (event.which === 9) { // if event is tab
      jQuery.tabNext(); // simulate tab press
      var e = $.Event('click'); // create click event
      $(event.target).parent().siblings().find('.multiselect__option--highlight:not(.multiselect__option--selected)').trigger(e); // trigger click event to select the focused option
      event.preventDefault(); // prevent tab default action, because we already did tabNext
   }
});

It uses some JQuery, which I usually try to avoid, but that way worked really well for me =-)
The jQuery.tabNext(); is from here: https://github.com/marklagendijk/jquery.tabbable
Be sure to put the code after jquery is loaded (you can put it on onload event)

[SamuelSchwegler]

try this:

Thanks! it worked but i had to change $(document).on('keydown', '.multiselect', function(event) {' to $('.multiselect__input').keydown(function (event) { some how the "tab"-key keydown did only get recognized the first way.

[hisuwh]

Is this still supported? It's not working for me?