无头 UI 组合框焦点行为

Question

我正在使用 Headless UI Combobox 作为自动完成搜索栏（React/Remix 应用程序）。我希望搜索栏在提交搜索后放弃焦点。

在某些设备上（例如 iPhone Safari），它似乎默认执行此操作；然而，在桌面版 Chrome 上，我得到了非常不同的行为。组合框重新聚焦，我不知道它什么时候/为什么这样做，所以我不能在 useEffect 中手动模糊它。

我所能做的就是模糊 setTimeout 上的栏。

Answer 1

我遇到了类似的问题并找到了一个可能不是最优雅但可以完成工作的解决方案。

首先，我向 ComboBox 输入元素添加了一个 ref，并使用延迟为 0 的 setTimeout 来模糊它：

const handleChange = (event) => {
  // other stuff
  setTimeout(() => {
    searchRef.current.blur()
  }, 0)
}

// a structure like this
<ComboBox onChange={handleChange}>
  <Combobox.Input ref={searchRef} />
</ComboBox>

这对于键盘输入来说效果很好，但我注意到当我点击 ComboBox 时，它会立即聚焦，然后由于 setTimeout 而变得模糊，从而产生明显的闪烁效果。为了解决这个问题，我向 ComboBox 添加了一个 onMouseDown 事件并调用了 preventDefault() 以防止输入被聚焦：

<Combobox.Options
  onMouseDown={(e) => {
    e.preventDefault()
  }}
/>

就像你说的，它有点 hacky，但它可以工作，并且在工作几个小时后，它工作比不工作要好，而且我没有得到报酬，所以无论如何没有人会看代码。