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

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

• javascript
• vue.js
• vuetify.js

3 Answers 3

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

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

I used following code in "vuetify": "^3.7.0"

// template

<v-autocomplete
    ref="autocomplete" 
    @update:modelValue="setMenuState"
    .....

<script setup lang="ts">
.....

 const autocomplete = ref<VAutocomplete | null>(null);
 const setMenuState = async (newValue: string | null) => {

  if (!newValue && autocomplete.value) {
    await nextTick();
    await nextTick();
      autocomplete.value.focus();
      autocomplete.value.menu = true
  }
};

I hope this helps someone! Happy coding!

P.S. I understand that I'm mainly answering how to open the menu programmatically, but I couldn't find a relevant post... So I'm posting it here... don't be too quick to judge...