无法从 Vue3 中的 Headless UI 模糊 ComboboxInput，组合 API

Question

我正在尝试通过 ref 访问<ComboboxInput/>并以编程方式模糊输入元素。 我得到的错误是 blur 是未定义的，但是当我 console.log 引用本身时，它看起来像是对 HTMLInputElement 的实际引用。

这是组合框输入：

  <ComboboxInput
    class="border-none pl-3 pr-10 leading-5 text-gray-900"
    v-bind="{ ...$attrs, ...rest }"
    :class="[autocomplete({ size }), { [readonlyStyle]: readonly }]"
    :display-value="() => getSelectedValues(value)"
    :placeholder="placeholder"
    @change="onChange"
    @focus="openOptions"
    :ref="comboInput"
   />

这是参考：

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

有谁知道如何解决这个问题？

Answer 1

你不绑定模板引用。 使用ref=而不是:ref=

<ComboboxInput
  ref="comboInput"
/>

然后使用 headlessui 使用.el或.$el访问内部输入元素，以便模糊：

comboInput.value.$el.blur()

Answer 2

在这种情况下你不应该使用 setTimeout，使用这样的东西

import { ref, nextTick } from 'vue'

const comboInput = ref()

const handleBlur = () => {

nextTick(() => {
     comboInput.value.$el.blur()
  })

}

这应该工作