Vuetify v-select 不支持键盘 Tab 键

Question

I have the form below for users. The issue here is when I am on first_name field and I press tab key on the keyboard it takes me to the last_name field. When I press tab key when I am on last_name field it skips the city field and goes directly to the phone_number field. I have to click on city field to select the city. Tab key doesn't take me to v-select. I am using vuetify version 2.3.10. I am not able to figure out a work around for this. Any idea how this can be resolved?

<template>
  <div>
    <v-form :model='user'>
      <v-text-field
       label='First Name'
       v-model='user.first_name'>
      </v-text-field>
      <v-text-field
       label='Last Name'
       v-model='user.last_name'>
      </v-text-field>
      <v-select 
       :items="cities"
       attach
       item-text='name'
       item-value='name'
       v-model="user.city"
       label="City">
      </v-select>
      <v-text-field
       label='Phone Number'
       v-model='user.phone_number'>
      </v-text-field>
    </v-form>
  </div>
</template>

Answer 1

v-select logically is text input, and the opened list is v-list-item , so if you want the list open on focus you have to add code like this to your v-select

<v-select 
  @focus="($event) => {$event.target.click()}"
<v-select 

Here is Codepen

Answer 2

I just had this problem because I had followed the advice in this issue thread earlier on. By setting the v-select's input style to display: none , the browser no longer focuses on it with the tab key.

The fix is to use the following styles instead, which set the input's width to 0 instead of hiding it completely:

.v-select__selections input {
    width: 0 !important;
    max-width: 0 !important;
}
.v-select__selections .v-select__selection {
    max-width: none;
}

Answer 3

You can use only @focus="$event.target.click()" in focus event. It works for me.

<v-select
    label="Choose Item"
    v-model="item_id"
    :items="items"
    item-text="name"
    item-value="id"
    @focus="$event.target.click()">
</v-select>