React中Wrapper的onMouseDown触发Input获焦异常问题及解决方案咨询

问题原因 #

在Wrapper的onMouseDown事件中直接调用input.focus()时，浏览器的默认事件流程会干扰焦点设置：

• 点击Wrapper后，浏览器在mousedown事件触发完成后，会执行默认行为——将焦点分配给鼠标点击的目标元素（Wrapper本身不可获焦，最终焦点会回到文档）。
• 你手动调用的focus()会先执行，但随后浏览器的默认焦点处理会覆盖这个操作，导致input最终无法获焦。
• 添加e.preventDefault()虽能阻止浏览器的默认焦点行为，让input成功获焦，但同时也禁用了input的文本选中（这是mousedown事件的默认行为之一），不符合需求。

最优解决方案 #

使用setTimeout将focus()操作推迟到下一个事件循环执行，避开浏览器默认行为的干扰：

import "./styles.css";
import { useRef } from "react";

export default () => {
  const ref = useRef(null);

  return (
    <div className="App">
      <div
        className="Wrapper"
        onMouseDown={(e) => {
          setTimeout(() => {
            ref.current.focus();
          }, 0);
        }}
      >
        <input ref={ref} />
      </div>
    </div>
  );
};

方案原理 #

setTimeout(fn, 0)会把focus()操作放到当前事件队列的末尾，等浏览器完成mousedown的所有默认行为（包括焦点的默认分配）后再执行。此时手动设置的焦点不会被覆盖，同时因为没有阻止默认行为，input的文本高亮功能也能正常使用。

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