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?
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']
}
})<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-menu offset-y :close-on-content-click="false">
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on">foobar</v-btn>
</template>
<v-autocomplete autofocus :items="flowers" multiple label="Select an item" @focus="$event.target.click()"></v-autocomplete>
</v-menu>
</v-container>
</v-main>
</v-app>
</div>