React中添加tabIndex后Div容器无法通过方向键滚动问题

问题详情 #

有一个宽度始终超出页面可用空间的div，它被放在设置了overflow-x: visible的容器中，该容器又嵌套在flex容器内。原本点击这个div后，按左右方向键可以滚动容器，这是预期行为。现在需要给这个div添加onKeyDown事件处理函数，要求按下特定按键（包含左右箭头）时修改div内容。为了让onKeyDown生效，给div加了tabIndex=0，但添加后容器无法通过左右方向键滚动，且代码里并没有调用event.preventDefault()。这个预期行为在Chrome、Edge中正常，但在Firefox里异常，怀疑是操作问题或是React Bug。

问题根源 #

这不是React Bug，是不同浏览器对可聚焦元素的键盘事件默认行为处理逻辑差异导致的：在Firefox中，当元素设置tabIndex=0成为可聚焦元素后，左右方向键的默认事件会被该元素直接捕获，不会传递给外层的滚动容器；而Chromium内核的浏览器（Chrome、Edge）会将这类滚动相关的按键事件冒泡到滚动容器上。

解决办法 #

可以通过以下两种方式处理：

1. 区分按键逻辑，手动触发滚动
   在事件处理函数里判断按键类型：如果是需要修改内容的特定按键，执行内容修改逻辑；如果是左右箭头键，手动调用滚动容器的滚动方法，模拟默认滚动行为。示例代码如下：

   const handleKeyDown = (e) => {
     const scrollContainer = document.getElementById('your-scroll-container-id');
     // 示例：假设按下空格键时修改内容，左右箭头保留滚动
     if (e.key === ' ') {
       // 执行修改div内容的逻辑，比如更新state
       setContent('更新后的内容');
     } else if (e.key === 'ArrowLeft') {
       // 向左滚动，可调整滚动距离
       scrollContainer.scrollLeft -= 50;
     } else if (e.key === 'ArrowRight') {
       // 向右滚动，可调整滚动距离
       scrollContainer.scrollLeft += 50;
     }
   };
   

2. 调整事件绑定对象
   把onKeyDown事件绑定到外层的滚动容器上，同时给内容div保留tabIndex=0让它可以被聚焦。这样滚动容器能直接捕获按键事件，既可以处理内容修改逻辑，也能保留默认的滚动行为。

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