如何在焦点锁定环境中使用Vuetify v-select组件

核心问题在于v-select的下拉选项容器v-overlay-container默认挂载在<body>下，脱离了焦点锁定的范围，导致键盘导航失效。以下是几种可行的解决方案：

1. 将下拉层挂载到焦点锁定容器内 #

利用Vuetify v-select的attach属性，把下拉菜单直接挂载到筛选器的根容器中，让它成为焦点锁定范围的一部分。

<template>
  <!-- 焦点锁定的筛选器容器 -->
  <div ref="filterRoot" class="filter-container">
    <v-select
      v-model="selectedValue"
      :items="optionsList"
      label="选择筛选条件"
      attach="filterRoot"
    ></v-select>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const filterRoot = ref(null);
const selectedValue = ref('');
const optionsList = ref(['选项A', '选项B', '选项C']);
</script>

这种方法能让下拉菜单完全纳入焦点锁定的管理，原生键盘导航（上下箭头、回车选中）会自动生效。

2. 调整焦点锁定逻辑，允许下拉选项获取焦点 #

如果无法修改下拉层的挂载目标，需要在焦点锁定的逻辑中，把v-select下拉选项加入焦点白名单：

// 假设使用focus-trap库实现焦点锁定
import focusTrap from 'focus-trap';

const trap = focusTrap(document.querySelector('.filter-container'), {
  allowOutsideClick: (e) => {
    // 允许点击v-select的下拉选项
    return e.target.closest('.v-overlay-container .v-list-item') !== null;
  },
  focusTarget: (e) => {
    // 允许焦点移动到下拉选项
    return e.target.closest('.v-overlay-container .v-list-item') !== null;
  }
});

如果是自定义的焦点锁定逻辑，在处理键盘导航时，判断目标元素是否属于v-select的下拉层，若属于则允许焦点移动。

3. 手动监听键盘事件控制选项选中 #

如果前两种方法不适用，可以手动监听键盘事件，直接控制v-select的选中值：

<template>
  <v-select
    ref="selectInstance"
    v-model="selectedValue"
    :items="optionsList"
    label="选择筛选条件"
    @keydown.down="handleDownKey"
    @keydown.up="handleUpKey"
  ></v-select>
</template>

<script setup>
import { ref } from 'vue';
const selectInstance = ref(null);
const selectedValue = ref('');
const optionsList = ref(['选项A', '选项B', '选项C']);

function handleDownKey(e) {
  e.preventDefault();
  const menu = selectInstance.value?.menu;
  if (menu?.isActive) {
    const currentIdx = optionsList.value.indexOf(selectedValue.value);
    const nextIdx = currentIdx === optionsList.value.length - 1 ? 0 : currentIdx + 1;
    selectedValue.value = optionsList.value[nextIdx];
  }
}

function handleUpKey(e) {
  e.preventDefault();
  const menu = selectInstance.value?.menu;
  if (menu?.isActive) {
    const currentIdx = optionsList.value.indexOf(selectedValue.value);
    const prevIdx = currentIdx === 0 ? optionsList.value.length - 1 : currentIdx - 1;
    selectedValue.value = optionsList.value[prevIdx];
  }
}
</script>

这种方式需要自己维护选项的选中逻辑，但能绕过焦点锁定的限制。

4. 配置菜单的焦点属性 #

通过menu-props开启下拉菜单的焦点陷阱，确保菜单内部的焦点管理正常工作：

<v-select
  :menu-props="{ trapFocus: true, focusable: true }"
  v-model="selectedValue"
  :items="optionsList"
  label="选择筛选条件"
></v-select>

该配置会让v-select的下拉菜单自己管理内部焦点，减少外部焦点锁定的干扰。

内容的提问来源于stack exchange，提问作者Pimmesz