tabIndex属性对Tab键盘事件监听的影响

问题

项目开发中需要实现对“Tab”按键的点击监听，发现了一下几个现象

现象1

tab事件没有被监听到

import { useRef, useState } from "react";
import { useKeyPress } from "ahooks";
/**
 * 监听的tab事件不生效
 * @returns 
 */
function TabEvent1() {
  const divRef = useRef(null);
  const [tabCount, setTabCount] = useState(0);
  useKeyPress("Tab", (e) => {
    e.preventDefault();
    setTabCount(tabCount + 1)
  }, {target: divRef})
  return (
    <div ref={divRef} className="div1">
      tab{tabCount}
    </div>
  );
}

如上：Tab点击时，会在浏览器中可被选中的框中来回切换

现象2

在div中加入了一个input框（也可以是select等）

import { useRef, useState } from "react";
import { useKeyPress } from "ahooks";
/**
 * 监听的tab事件，只会在tab点击的第二次生效
 * 实际上第一次tab事件，是触发了选中了input框
 * @returns 
 */
function TabEvent2() {
  const divRef = useRef(null);
  const [tabCount, setTabCount] = useState(0);
  useKeyPress("Tab", (e) => {
    e.preventDefault();
    setTabCount(tabCount + 1)
  }, {target: divRef})
  return (
    <div ref={divRef} className="div1">
      <input/>
      tab{tabCount}
    </div>
  );
}

如上：在div中加入了一个input，可以实现tab按键监听。但是出现的问题是，只有在第二次点击Tab后，才会生效（第一次点击Tab后，会选中到input上）

解决方法

因为正常的div是没有办法聚焦，看下tabIndex属性

在加上了tabIndex={-1}属性后，可以正常监听tab键盘事件

import { useRef, useState } from "react";
import { useKeyPress } from "ahooks";
/**
 * 监听的tab事件正常
 * @returns 
 */
function TabEvent3() {
  const divRef = useRef(null);
  const [tabCount, setTabCount] = useState(0);
  useKeyPress("Tab", (e) => {
    e.preventDefault();
    setTabCount(tabCount + 1)
  }, {target: divRef})
  return (
    <div ref={divRef} className="div1" tabIndex={-1}>
      tab{tabCount}
    </div>
  );
}