Quasar V2中q-dialog内的q-select组件autofocus自动聚焦失效如何解决？

问题根因 #

单独使用<q-select autofocus />时自动聚焦正常，放入默认QDialog后失效，核心原因是QDialog默认带入场渲染动画，组件挂载触发原生autofocus逻辑时，对话框尚未完成动画渲染、未进入可交互状态，同时QDialog默认的焦点管理逻辑会在打开时抢占焦点到对话框容器，直接覆盖了QSelect的自动聚焦行为。

可行解决方法 #

• 方案1（最稳定，推荐）：监听QDialog的@show事件，待对话框完全打开、动画执行完毕后，手动调用QSelect实例的focus方法触发聚焦
  示例代码：

  <template>
    <!-- 对话框绑定show事件 -->
    <q-dialog v-model="showDialog" @show="handleDialogShow">
      <q-card style="min-width: 350px">
        <q-card-section>
          <!-- 给q-select绑定ref，不需要加原生autofocus属性 -->
          <q-select
            ref="selectRef"
            v-model="selectedVal"
            :options="optionList"
            label="选择选项"
          />
        </q-card-section>
      </q-card>
    </q-dialog>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  const showDialog = ref(false)
  const selectRef = ref(null)
  const selectedVal = ref(null)
  const optionList = ['选项1', '选项2', '选项3']
  
  const handleDialogShow = () => {
    // 对话框完全显示后再触发select聚焦
    selectRef.value?.focus()
  }
  </script>
  

  该方案完全匹配Quasar组件的生命周期，不会因为设备性能差异、动画时长变化出现聚焦时机不准的问题。

• 方案2（简单场景可用）：给QDialog添加no-focus属性，禁用对话框默认的焦点抢占逻辑，此时QSelect上的autofocus属性即可正常生效
  示例代码：

  <q-dialog v-model="showDialog" no-focus>
    <q-card>
      <q-card-section>
        <q-select autofocus v-model="selectedVal" :options="optionList" />
      </q-card-section>
    </q-card>
  </q-dialog>
  

  注意：该方案会关闭QDialog自带的焦点陷阱能力，如果对话框内有多个可交互元素，需要自行处理焦点边界逻辑，仅适合对话框内只有QSelect一个交互元素的简单场景。

避坑提示 #

不要自行通过setTimeout设置固定延迟触发聚焦，不同设备上QDialog的入场动画完成时间受性能影响存在差异，固定延迟很容易出现聚焦失效或者焦点闪烁的问题。

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