React搜索输入框无匹配标题时自动失焦问题排查

问题表现 #

搜索输入框仅可正常输入与已有文件标题匹配的字符，一旦输入任意不存在于所有文件标题中的字符，搜索输入框会立即失去焦点，无法连续完成输入操作。该搜索功能此前运行正常，无明确故障触发变更记录。

复现流程 #

• 页面初始加载效果：
• 搜索输入框开始输入时效果：
• 输入标题中不存在的字符时效果：

故障根因 #

核心问题出在条件渲染逻辑设计缺陷：

1. 你在「无匹配结果」和「有匹配结果」两个独立返回分支里，分别定义了两个完全独立的<input>搜索框，两个输入框的父容器class分别为search和actionsBtn，属于DOM树中完全不同的节点
2. 当输入内容从有匹配变为无匹配时，React会直接卸载原有分支里的输入框，重新挂载新分支里的输入框，原有输入框的焦点自然会丢失，表现为输入到不匹配字符就突然失焦
3. 附带逻辑问题：输入框没有绑定value属性到searchInput状态，不属于标准受控组件，容易出现状态和显示值不同步的问题；另外过滤逻辑里同时判断toLowerCase和toUpperCase属于冗余逻辑，本质是没有对用户输入的搜索值做统一大小写转换导致的。

修复方案 #

把搜索输入框移到条件分支外层，保证全状态下只渲染一个输入框实例，同时补全受控组件绑定、简化过滤逻辑，参考代码如下：

// 搜索框固定在条件分支外渲染，全程不会被卸载重建
return (
  <React.Fragment>
    <div className="filesList">
      <div className="actionsBtn">
        <NavLink to="/add-file" className="addFileBtn" title="Add File">
          <FontAwesomeIcon icon={faPlus} />
        </NavLink>
        <input
          type="text"
          placeholder="Search Files"
          value={searchInput}
          onChange={(event) => setSearchInput(event.target.value)}
        />
      </div>
      {/* 处理全量文件为空的情况 */}
      {props.items.length === 0 ? (
        <div className="files-list center">
          <Card>
            <h2>No files found.</h2>
          </Card>
        </div>
      ) : (
        <>
          {(() => {
            // 统一转小写做过滤，移除冗余判断
            const filteredFiles = props.items.filter(file => 
              file.title.toLowerCase().includes(searchInput.toLowerCase())
            )
            return filteredFiles.length === 0 ? (
              <Card>
                <h2>No files found.</h2>
              </Card>
            ) : (
              <ul className="files-list">
                {filteredFiles.map((file) => (
                  <FilesPostItem
                    key={file.id}
                    id={file.id}
                    title={file.title}
                    file={file.file}
                    creator={file.creator.name}
                    description={file.description}
                    creatorId={file.creator}
                    onDelete={props.onDeleteFile}
                  />
                ))}
              </ul>
            )
          })()}
        </>
      )}
    </div>
  </React.Fragment>
)

修复后无论输入内容是否有匹配结果，搜索框都不会被重新挂载，焦点会一直保留，可连续完成输入操作。

内容的提问来源于stack exchange，提问作者V.T