场景复现

条件判断出现的 Input ，明明加了 autoFocus, 但是只有刚出现时被聚焦过，很快焦点就被别的元素抢走了。

排查思路

初步判断焦点就是被别的元素抢走了，尝试找出抢焦点的元素是什么

document.activeElement

console 里键入 document.activeElement，可以查看当前获取焦点的元素，一般来说能找出抢焦点的罪魁祸首。

但是有些元素抢完焦点立即释放了，这时候 document.activeElement 返回的会是外层元素。

relatedtarget

如果我们希望 focus 的 Input 曾经获取过焦点，可以通过监听 Input 的 blur 事件，打印出 event，event 有一个属性：relatedtarget，会给出抢焦点的元素。

👉 relatedTarget 的 MDN 定义

<Input
  blur={(e) => onBlur(e)}
/>

const onBlur = (e: FocusEvent<any>) => {
  console.log(e.relatedtarget); 
  // log: <textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea>
}

找到抢焦的元素后，就可以对症下药，找出解决方案了。

结论

通过 document.activeElement 和 blurEvent.relatedtarget 找出抢焦元素，再对症下药解决问题。