禁用Bootstrap单选标签切换器对上下方向键的keydown事件监听

问题背景 #

我需要让Bootstrap的单选标签切换器不再拦截上和下方向键，使得页面能像控件未获取焦点时一样正常滚动。

初始尝试及问题 #

我首先编写了以下代码，试图阻止控件响应上下方向键并重新触发滚动事件：

$('input[type="radio"][role="tab"]').on('keydown keyup', function (e)
{
    if (e.key == 'ArrowDown' || e.key == 'ArrowUp')
    {
        e.stopImmediatePropagation();
        e.preventDefault();

        // 此时控件已不再响应上下方向键
        $('body')[0].dispatchEvent(new KeyboardEvent(e.type, { 'key': e.key }));

        // 但页面依旧无法滚动，此代码无效果
    }
});

这段代码成功让控件不再响应上下方向键，但页面仍然无法正常滚动。

补充说明 #

• 最小复现场景：使用Bootstrap 5.3的单选切换按钮组件，点击任意按钮后按下方向键，左右键功能正常，但上下键无法触发页面滚动。
• 替代可行方案：
  我尝试了另一种实现方式，虽然和最初的需求不完全匹配，但用户体验表现更好：

$('input[type="radio"][role="tab"]').on('keydown keyup', function (e)
{
    if (e.key == 'ArrowDown' || e.key == 'ArrowUp')
    {
        e.stopImmediatePropagation();
        e.preventDefault();

        document.activeElement.blur();
    }
});

首次按下上下方向键时，当前聚焦的单选按钮会失去焦点，之后页面就能正常响应上下方向键进行滚动了。

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