Bootstrap OffCanvas组件焦点异常跳转至侧边栏链接问题求助

问题根源 #

Bootstrap OffCanvas组件默认启用**焦点陷阱（focus trapping）**机制，当侧边栏处于显示状态时，它会监听全局键盘事件，强制焦点在侧边栏内部的可交互元素间循环。你的箭头键事件虽然找到了目标元素，但事件冒泡后被OffCanvas的焦点管理逻辑拦截，导致焦点被强制跳转到侧边栏最后一个链接。

具体解决方法 #

1. 阻止按键事件冒泡 #

在你的文本框箭头键处理函数中，添加event.stopPropagation()，阻止事件传递到OffCanvas的全局监听器：

// 假设你的文本框ID是search-input，目标元素ID是popup-first-item
document.getElementById('search-input').addEventListener('keydown', (e) => {
  if (e.key === 'ArrowDown') {
    e.preventDefault(); // 取消默认的输入框光标下移行为
    e.stopPropagation(); // 阻止事件冒泡，避免OffCanvas捕获
    
    const target = document.getElementById('popup-first-item');
    if (target) {
      target.focus();
    }
  }
});

2. 禁用OffCanvas的焦点陷阱 #

如果你的业务场景不需要OffCanvas的焦点循环功能，可以在初始化OffCanvas时关闭focusTrap选项：

const sidebarOffcanvas = new bootstrap.OffCanvas(
  document.getElementById('offcanvas-sidebar'),
  { focusTrap: false }
);

注意：禁用焦点陷阱后，用户可以将焦点移出侧边栏，适合侧边栏非模态的场景。

3. 将弹出div纳入OffCanvas焦点范围（可选） #

如果弹出div属于侧边栏的关联组件，可以将其放置在OffCanvas的容器内部，这样焦点陷阱会自动将其纳入循环范围，此时你的焦点跳转逻辑就能正常工作，无需额外修改。

验证方法 #

测试时可以打开浏览器控制台，在目标元素的focus()调用后打印document.activeElement，确认焦点是否正确设置；如果还是侧边栏元素，说明事件冒泡未被阻止，或者焦点陷阱仍在生效。

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