How to make v-autocomplete/v-select always show the dropdown?

Question

I am working with a v-autocomplete, which is extended from v-select.

I have a situation where I want to wrap this select inside a v-menu.

If you try to wrap a v-select in a v-menu with a v-btn activator, what you'd expect is to render a button first and when you click on the button, it would show the the autocomplete.

See this codepen to know what I mean: https://codepen.io/sntshk/pen/KKmjMPX?editors=1010

The problem with the above implementation is, when you click on the button, what you initially see is a squished dropdown items which looks really bad there. Then when you focus on the v-select by clicking, you'd see the full length dropdown list.

What I am trying to achieve here is to make the v-select focused by default when I click the button. This will render the listitem fully when I click the button.

So my question is, what do I do to make the v-select focused by default?

user_12078942 · Answer

you can achieve this effect by setting autofocus prop on the v-autocomplete and then listen to the focus event on this element and do the following:

@focus="$event.target.click"

this way when menu opens, selection field get focused and the focus event code makes the drop down menu open.

check the demo below:

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    flowers: ['foo', 'bar', 'baz', 'lorem', 'ipsum', 'something', 'else', 'to', 'make', 'itemlist', 'long']
  }
})

How to make v-autocomplete/v-select always show the dropdown?

1 Answers