How to focus and activate a vue multiselect?

Question

When the user double-clicks this:

<div 
  class="open-select" 
  v-if="!editable" 
  @dblclick="editable=true">{{ name }} 
</div>

I'd like this multiselect to be open and focused:

<multiselect
    v-else
    v-model="name"
    :options="names"
    track-by="id"
    tabindex="0"
    autofocus
    @select="editable=false"
></multiselect>

The double-click event shows the multiselect element fine, but the multiselect still requires the user to click it to open. I'd like it to open automatically after appearing.

Things I've tried:

• focusing the multiselect:
  • tabindex="0"
  • autofocus
  • When I try to select the focused item in jQuery, $(':focus')[0], I get 'undefined'

Answer 1

Heyo!

You can put a ref on the component and then trigger focus which will open the dropdown.

<multiselect ref="vms" v-bind="yourAttributes" />

And then in your created hook you add

this.$refs.vms.$el.focus()