如何让v-autocomplete/v-select在v-menu激活时默认聚焦以正常显示下拉列表

解决方案 #

方案1：通过v-menu的opened事件触发聚焦（最稳妥） #

Vuetify的v-menu提供opened事件，会在菜单完全渲染展开后触发，此时调用v-autocomplete暴露的focus()实例方法即可实现默认聚焦：

<template>
  <v-menu
    v-model="menuOpen"
    :close-on-content-click="false"
    offset-y
    @opened="handleMenuOpened"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-btn v-bind="attrs" v-on="on">
        打开选择器
      </v-btn>
    </template>
    <v-autocomplete
      ref="autocompleteRef"
      :items="options"
      label="选择项"
      <!-- 其他自定义属性 -->
    />
  </v-menu>
</template>

<script>
// Vue2 写法
export default {
  data() {
    return {
      menuOpen: false,
      options: ['选项1', '选项2', '选项3']
    }
  },
  methods: {
    handleMenuOpened() {
      this.$nextTick(() => {
        this.$refs.autocompleteRef.focus()
      })
    }
  }
}

// Vue3 写法
/*
<script setup>
import { ref, nextTick } from 'vue'
const menuOpen = ref(false)
const autocompleteRef = ref(null)
const options = ['选项1', '选项2', '选项3']

const handleMenuOpened = async () => {
  await nextTick()
  autocompleteRef.value.focus()
}
</script>
*/
</script>

注意不要用v-menu的open事件，该事件在菜单刚触发打开时就会执行，此时v-autocomplete还未完成DOM渲染，调用focus会失效。

补充说明 #

你遇到的下拉被挤压的问题，本质是v-select系列组件的下拉宽度默认和输入框宽度同步，输入框未聚焦时组件未完成完整的布局宽度计算，导致下拉容器宽度异常。聚焦后组件会重新计算布局，下拉宽度就能恢复正常。

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