Vuetify 3 v-autocomplete组件获焦点时全选文本的实现问题

我需要实现：当用户通过Tab切换选中或点击v-autocomplete组件时，自动选中组件内的全部文本，方便直接编辑。但以下代码未能实现目标：

<v-autocomplete
    label="Customer"
    @focus="OnCustomerFocus"
></v-autocomplete>

<script>
export default {
  methods: {
    OnCustomerFocus(event: any) {
      console.log('customer focused');
      console.log(event);
      event.target.select();
    },
  }
}
</script>

测试后发现该方法无效，且根据Vuetify社区讨论，这个全选文本的功能曾是v-autocomplete的默认行为，后来被移除。

解决方法 #

问题核心：@focus事件的event.target指向的是组件外层容器，而非内部实际的输入框，因此调用select()不会生效。需要获取组件内部的input元素再执行全选：

1. 给组件添加ref属性
2. 在聚焦事件中通过ref找到内部input元素，执行select()（添加微延迟确保DOM就绪）

选项式API代码示例：

<v-autocomplete
  label="Customer"
  ref="customerAuto"
  @focus="onCustomerFocus"
></v-autocomplete>

<script>
export default {
  methods: {
    onCustomerFocus() {
      const inputEl = this.$refs.customerAuto?.$el.querySelector('input');
      if (inputEl) {
        setTimeout(() => inputEl.select(), 0);
      }
    }
  }
}
</script>

组合式API代码示例：

<script setup>
import { ref } from 'vue';

const customerAuto = ref(null);

const onCustomerFocus = () => {
  const inputEl = customerAuto.value?.$el.querySelector('input');
  if (inputEl) {
    setTimeout(() => inputEl.select(), 0);
  }
};
</script>

<template>
  <v-autocomplete
    label="Customer"
    ref="customerAuto"
    @focus="onCustomerFocus"
  ></v-autocomplete>
</template>

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