CODEWITHSUNDEEP
javascriptvue.jsvue-componentdom-eventsvuetify.js
Santosh Kumar
Santosh Kumar

Reputation: 27875

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

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?

Upvotes: 3

Views: 3529

Answers (1)

hamid niakan
hamid niakan

Reputation: 2851

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 4

Related Questions