React自动补全输入在移动端浏览器丢失按键问题求助

问题分析 #

你遇到的真实移动设备快速输入丢字符问题，桌面端和Chrome设备模拟均正常，核心诱因包括：

• 手动修改Autocomplete状态（如onBlur强制关面板）与库内部状态管理冲突，打断输入同步逻辑
• inputRef传递错误，导致Autocomplete无法正确监听移动端输入事件
• useDeferredValue延迟状态更新，造成输入框值与Autocomplete内部状态不同步
• 移动端主线程资源有限，频繁搜索请求抢占事件处理资源

具体修复步骤 #

1. 移除手动onBlur处理 #

手动绑定的onBlur会强制关闭面板，干扰Autocomplete内部状态同步，直接删除相关代码：

// 删掉该回调
// const onInputBlur = useCallback(() => {
//   setAutocompleteState((curr) => ({ ...curr, isOpen: false }));
// }, []);

// 同时移除input上的onBlur属性
<input
  ref={inputRef}
  {...autocomplete.getInputProps()}
  autoFocus={!isDesktop}
  // onBlur={onInputBlur} 删掉此行
/>

2. 修正inputRef传递方式 #

Algolia Autocomplete无需手动传入inputElement，库会通过ref自动绑定输入元素。原代码传递初始化时为null的inputRef.current，会导致事件监听绑定失败：

// 修正getInputProps调用，移除inputElement参数
<input
  ref={inputRef}
  {...autocomplete.getInputProps()}
  autoFocus={!isDesktop}
/>

3. 移除useDeferredValue #

延迟状态会导致面板渲染与输入状态不同步，直接使用原始autocompleteState渲染：

// 删掉此行
// const deferredAutocompleteState = useDeferredValue(autocompleteState);

// 渲染时替换为autocompleteState
{autocompleteState.isOpen && (
  <div ref={panelRef} {...autocomplete.getPanelProps()} zIndex={zIndex}>
    {/* 原有渲染逻辑 */}
  </div>
)}

4. 配置Autocomplete内置防抖 #

利用库内置防抖控制搜索请求频率，避免移动端主线程被频繁请求阻塞：

const autocomplete = useMemo(
  () =>
    createAutocomplete({
      placeholder: 'search',
      debounce: 100, // 添加防抖时间配置
      onStateChange: ({ state }) => setAutocompleteState(state),
      // 其他配置...
    }),
  [usersSearchIndex, router] // 移除未使用的localize依赖
);

5. 修复HTML结构错误 #

原代码中section直接用<li>包裹列表不符合语义，可能导致移动端渲染异常：

<section key={`section-${i}`}>
  {users.length > 0 && (
    <ul {...autocomplete.getListProps()}> {/* 将li改为ul */}
      {users.map((userSearchable) => {
        return (
          <li key={userSearchable.id}> {/* 移除外层div，直接用li包裹 */}
            <div {...autocomplete.getItemProps({ item: userSearchable, source })}>
              <img src={userSearchable.avatar} />
              <span>{userSearchable.name}</span>
            </div>
          </li>
        );
      })}
    </ul>
  )}
</section>

验证方案 #

修改后在真实移动设备测试快速输入：

• 字符丢失现象应消失
• 面板显示与输入状态同步
• 搜索请求频率被合理控制，无主线程阻塞

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