Vuetify3 Autocomplete inner-icon焦点问题：如何修改tabindex为-1

从Vuetify 3.5.10及以上版本开始，焦点会落在append-inner区域的图标上。我希望让这个inner-icon不获得焦点，目前它的tabindex被设置为0，尝试修改props后元素依然会获取焦点，对应的DOM结构如下：

<i
  class="v-icon notranslate v-theme--dark v-icon--size-default v-icon--clickable v-autocomplete__menu-icon"
  role="button"
  aria-hidden="false"
  tabindex="0"
  aria-label="Open"
  title="Open"
  ><svg
    class="v-icon__svg"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    role="img"
    aria-hidden="true"
  >
    <path d="M7,10L12,15L17,10H7Z"></path></svg
></i>

可行解决方案 #

1. 自定义append-inner插槽替换图标

直接替换默认的append-inner图标，手动设置tabindex="-1"，同时绑定点击逻辑触发菜单切换：

<v-autocomplete ref="autocomplete">
  <template v-slot:append-inner>
    <v-icon
      class="v-icon--clickable v-autocomplete__menu-icon"
      role="button"
      aria-label="Open"
      tabindex="-1"
      @click="$refs.autocomplete.toggle()"
    >
      <svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
        <path d="M7,10L12,15L17,10H7Z"></path>
      </svg>
    </v-icon>
  </template>
</v-autocomplete>

2. 挂载后修改DOM属性

在组件挂载完成后，通过JS直接修改目标元素的tabindex：

// Vue 3 组合式API示例
import { onMounted } from 'vue';

onMounted(() => {
  const menuIcon = document.querySelector('.v-autocomplete__menu-icon');
  if (menuIcon) {
    menuIcon.setAttribute('tabindex', '-1');
  }
});

如果页面中有多个autocomplete，可以更精准地通过组件ref定位元素：

onMounted(() => {
  const iconEl = $refs.autocomplete.$el.querySelector('.v-autocomplete__menu-icon');
  if (iconEl) {
    iconEl.setAttribute('tabindex', '-1');
  }
});

3. 自定义全局指令复用逻辑

如果多个组件都需要这个功能，可以注册全局指令统一处理：

// 全局注册（比如在main.js中）
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.directive('no-tab-focus', {
  mounted(el) {
    el.setAttribute('tabindex', '-1');
  }
});
app.mount('#app');

之后在自定义插槽的图标元素上使用指令：

<v-icon v-no-tab-focus ...>...</v-icon>

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