javascript - Vuetify v-select does not support keyboard tab key

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>

question from:https://stackoverflow.com/questions/65943554/vuetify-v-select-does-not-support-keyboard-tab-key

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