Vuetify open select/autocomplete/combobox menu on focus

user_2644202 0
Viewed 8130

I have a Vuetifyjs Autocomplete. I want to open its menu when user focuses on it using tab key from previous input. Below is the sample code

<div id="app">
<v-app>
    <v-container >
    <v-row >
        <v-col cols="12" md="4">
        <v-text-field label="Text Field"/>
        </v-col>
        <v-col cols="12" md="6">
        <v-autocomplete
            label="Autocomplete"
            :items="components"
            hint="need to open menu on focus, just like click" persistent-hint
        ></v-autocomplete>
        </v-col>
    </v-row>
    </v-container>
</v-app>
</div>

<script>
new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
        components: [
          'Autocompletes', 'Comboboxes', 'Forms', 'Inputs', 'Overflow Buttons', 'Selects', 'Selection Controls', 'Sliders', 'Textareas', 'Text Fields',
        ],
  },
  methods: {
  }
})
</script>

I have also created a pen for this https://codepen.io/salalaslam/pen/YzzPajN

vuetify.js vue.js javascript
2 Answers

Because vuetify does not have the option you want, you must control it directly.

An input tag exists inside the autocomplete component. Specify focus event directly on this input tag.

Try this.

// template

<v-autocomplete
    ref="autocomplete" 
    label="Autocomplete"
    :items="components"
    hint="need to open menu on focus, just like click" 
    persistent-hint
></v-autocomplete>

export default {
  mounted () {
    let autocompleteInput = this.$refs.autocomplete.$refs.input

    autocompleteInput.addEventListener('focus', this.onFocus, true)
  },
  methods: {
    onFocus (e) {
      this.$refs.autocomplete.isMenuActive = true  // open item list
    }
  }
}

pen - https://codepen.io/kdydesign/pen/rNNadXN?editors=1111

user_75667990

Instead of digging to the low-level DOM, you can simply use Vue.js's focus() and activateMenu()

<template>
  <v-row>
    <v-col cols="12" md="4">
      <v-text-field label="Text Field" @keydown.tab="focus" />
    </v-col>
    <v-col cols="12" md="6">
      <v-autocomplete
        ref="aut"
        label="Autocomplete"
        :items="components"
        hint="need to open menu on focus, just like click"
        persistent-hint
      ></v-autocomplete>
    </v-col>
  </v-row>
</template>

<script>
export default {
  layout: "center-six",
  data() {
    return {
      components: ["A", "B", "C", "D"],
    };
  },
  methods: {
    focus() {
      this.$refs["aut"].focus();
      this.$refs["aut"].activateMenu();
    },
  },
};
</script>

I have also created a simple codePen VueJs Menu Activator

user_145294540
Related