Vue3组合式API中Headless UI ComboboxInput无法调用blur问题求助

问题原因 #

Headless UI 的 <ComboboxInput/> 是封装后的组件，直接绑定的 ref 实际指向组件实例而非底层 <input> DOM 元素——你控制台看到的打印结果可能是组件实例的内部属性（比如 $el），而非 ref.value 本身就是 DOM 元素，导致调用 blur() 时提示方法未定义。

解决方案 #

方案1：通过组件实例的 $el 调用失焦方法 #

直接访问组件实例的 $el 属性（即底层渲染的 <input> DOM 元素），再调用 blur()：

const comboInput = ref()
const handleBlur = () => {
  comboInput.value?.$el?.blur()
}

方案2：确保DOM挂载完成后调用 #

如果是组件未完全挂载就调用 blur()，可以用 nextTick 等待DOM更新完成：

import { nextTick } from 'vue'

const comboInput = ref()
const handleBlur = async () => {
  await nextTick()
  comboInput.value?.$el?.blur()
}

方案3：通过Combobox根组件控制 #

如果代码中有 <Combobox> 根组件，可以给它绑定 ref，利用组件内置方法间接控制输入框失焦（关闭下拉面板时输入框会自动失焦）：

<Combobox :ref="comboRef">
  <ComboboxInput ... />
  <!-- 其他组件 -->
</Combobox>

const comboRef = ref()
const handleBlur = () => {
  comboRef.value?.close()
}

验证方法 #

可以在调用前打印内容确认类型：

const handleBlur = () => {
  console.log(comboInput.value) // 打印组件实例
  console.log(comboInput.value.$el) // 打印底层input DOM元素
  comboInput.value?.$el?.blur()
}

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