ngbDropdown新增wrapper层后键盘上下箭头导航功能失效如何解决

失效原因 #

ngbDropdown 内置的上下键导航逻辑默认只会读取 ngbDropdownMenu 的直接子级 ngbDropdownItem 作为可导航节点。你在菜单和选项之间新增了一层 .wrapper 容器后，所有选项不再是菜单的直接子元素，导致内置逻辑无法识别到可选项，键盘导航自然失效。

解决方法 #

方法一：使用官方嵌套容器指令（最优方案） #

ng-bootstrap 原生支持这种嵌套容器场景，只需要在你新增的 .wrapper 容器上添加 ngbDropdownItemContainer 指令即可，组件会自动递归检索该容器内所有 ngbDropdownItem 节点纳入导航逻辑，不需要修改其他业务代码。
修改后完整代码如下：

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownBasic1" role="combobox" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <div class="wrapper" ngbDropdownItemContainer>
      <button ngbDropdownItem role="option">Action - 1</button>
      <button ngbDropdownItem role="option">Another Action</button>
      <button ngbDropdownItem role="option">Something else is here</button>
    </div>
  </div>
</div>

方法二：低版本兼容方案 #

如果你使用的 ng-bootstrap 版本低于 8.0.0 未提供上述指令，可以手动实现键盘导航逻辑：

• 给 ngbDropdown 节点添加模板引用 #myDropdown="ngbDropdown"
• 监听菜单的 keydown 事件，捕获上下方向键的触发事件
• 手动获取所有 .wrapper 下的 ngbDropdownItem 节点，根据当前激活的下标切换焦点即可

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