Headless UI Combobox搜索提交后失焦异常问题求助

可能的原因 #

Chrome桌面端的焦点行为和移动端Safari存在差异，Headless UI的Combobox内部在组件状态更新（比如提交后重置/更新查询值）时，会触发内置的焦点恢复逻辑（用于无障碍或交互连贯性）。而useEffect是异步执行的，时机晚于组件内部的焦点操作，导致手动调用blur会被覆盖。

解决方案 #

1. 用useLayoutEffect同步执行失焦操作

useLayoutEffect会在DOM更新完成后同步执行，能优先于Headless UI内部的焦点恢复逻辑触发失焦，比setTimeout更可靠：

import { Combobox } from '@headlessui/react';
import { useState, useRef, useLayoutEffect } from 'react';

export function SearchBar() {
  const [query, setQuery] = useState('');
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [open, setOpen] = useState(false);
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 执行搜索逻辑（比如调用Remix action、发送API请求）
    console.log('搜索关键词:', query);
    
    // 标记提交状态+关闭下拉选项
    setIsSubmitted(true);
    setOpen(false);
  };

  useLayoutEffect(() => {
    if (isSubmitted && inputRef.current) {
      inputRef.current.blur();
      setIsSubmitted(false);
    }
  }, [isSubmitted]);

  return (
    <form onSubmit={handleSubmit}>
      <Combobox 
        value={query} 
        onChange={setQuery}
        open={open}
        onOpenChange={setOpen}
      >
        <Combobox.Input
          ref={inputRef}
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="输入关键词搜索..."
        />
        <Combobox.Options>
          {/* 自定义选项内容 */}
        </Combobox.Options>
      </Combobox>
      <button type="submit">搜索</button>
    </form>
  );
}

2. 阻止事件冒泡（针对全局状态更新场景）

如果提交后触发了页面级的状态更新（比如Remix的loader重新加载数据），可以在提交时阻止事件冒泡，避免全局重渲染导致的焦点回流：

const handleSubmit = (e) => {
  e.preventDefault();
  e.stopPropagation(); // 阻止事件向上冒泡
  // 搜索逻辑...
};

为什么setTimeout能临时生效？ #

setTimeout将失焦操作推迟到事件循环的下一轮，等Headless UI内部的焦点恢复逻辑执行完毕后再触发失焦，所以能生效。但这种hack方式依赖执行时机，在Headless UI或Chrome版本更新后可能失效，优先推荐同步执行的方案。

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