Vuetify v-select 不支持键盘 Tab 键

问题描述

我有以下表格供用户使用。这里的问题是，当我在 first_name 字段上并按键盘上的 Tab 键时，它会将我带到 last_name 字段。当我在姓氏字段时按 Tab 键时，它会跳过城市字段并直接转到电话号码字段。我必须点击城市字段来选择城市。 Tab 键不会带我进行 v-select。我正在使用 vuetify 版本 2.3.10。我无法为此找到解决方法。知道如何解决这个问题吗？

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

解决方法

@Botfather 逻辑上是 v-select 输入，打开的列表是 text，所以如果你想在焦点上打开列表，你必须将这样的代码添加到你的 {{1} }

v-list-item

这里是Codepen

,

我之所以遇到这个问题，是因为我之前遵循了 this issue thread 中的建议。 通过将 v-select 的输入样式设置为 display: none，浏览器不再使用 Tab 键关注它。

修复方法是使用以下样式，将输入的宽度设置为 0 而不是完全隐藏它：

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