Triggering the Vuetify select/autocomplete/combobox menu to open upon focusing on it

Question

Triggering the Vuetify select/autocomplete/combobox menu to open upon focusing on it

I'm working on implementing a Vuetifyjs Autocomplete feature. My goal is to have the menu open when the user focuses on it using the tab key after entering information in a previous input field. Below is a snippet of the code I am using:

<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've also provided a codepen link for reference: https://codepen.io/salalaslam/pen/YzzPajN

javascript vue.js vuetify.js

Answer 1

Answer №1

Unfortunately, vuetify does not offer the specific option you are looking for, so you will need to take direct control of it.

Within the autocomplete component, there is an input tag. You can add a focus event directly to this input tag.

Here is how you can achieve 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
    }
  }
}

Here is a codepen demonstration: https://codepen.io/kdydesign/pen/rNNadXN?editors=1111

Answer 2

Unfortunately, vuetify does not offer the specific option you are looking for, so you will need to take direct control of it.

Within the autocomplete component, there is an input tag. You can add a focus event directly to this input tag.

Here is how you can achieve 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
    }
  }
}

Here is a codepen demonstration: https://codepen.io/kdydesign/pen/rNNadXN?editors=1111

Answer 3

Answer №2

Don't bother with delving into the low-level DOM, you can easily utilize 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>

Check out my quick codePen VueJs Menu Activator

Answer 4

Don't bother with delving into the low-level DOM, you can easily utilize 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>

Check out my quick codePen VueJs Menu Activator

Triggering the Vuetify select/autocomplete/combobox menu to open upon focusing on it

Answer №1

Answer №2

Similar questions

Unlocking Bootstrap variables in Vue development (using Vanilla Bootstrap)

Building upon the preceding inquiry, a ReferenceError has occurred due to the object being undefined

The webpage hosted on Heroku displays a blank background, requiring users to refresh the page with an F5 key

Guide to utilizing jquery within node.js

Storing a variable in jQuery using AJAX and retrieving it at a later time

Guide on exporting a submodule within a TypeScript package

Revamp responsiveness in bootstrap 3 for printing with @media queries

The Quasar Icon Genie CLI transforms square icons into rectangle shapes

Utilizing ControlValueAccessor in various components

Creating a functional dropdown form in Ruby On Rails: A Step-by-Step Guide

Learn how to display a tooltip for every individual point on a Highcharts network graph within an Angular

Challenge with Vue fetching data

Preserving user interaction history in the browser while syncing with the server in AngularJS

Calculating the volume of an STL file mesh using three.js

The Vue 3 router seems to be malfunctioning and I am quite puzzled as to why

Step-by-step guide on making a post request to the Facebook Graph Api with Httparty in a Rails application

The issue of conflicting clickability between Vue row and href

Service has not been properly declared

typescript is failing to update CSSRule with the newly assigned background-color value

Guide to linking two variables in Vue.js