CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Salal Aslam
Salal Aslam

Reputation: 1377

Vuetify open select/autocomplete/combobox menu on focus

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

Upvotes: 3

Views: 13346

Answers (3)

Sergey
Sergey

Reputation: 176

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...

Upvotes: 0

Muluken Getachew
Muluken Getachew

Reputation: 1033

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

Upvotes: 2

Dev.DY
Dev.DY

Reputation: 455

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

Upvotes: 15

Related Questions