Material UI中含Collapse组件的MenuList如何通过方向键导航

MUI MenuList 默认的键盘导航逻辑，只会遍历自身直属子级中的MenuItem节点生成导航队列。你用Collapse组件包裹子菜单后，子级MenuItem成为了Collapse的后代节点，不在MenuList的直属子级遍历范围内，因此方向键只能在顶层菜单项间切换；焦点进入子菜单后，子菜单内的导航队列不包含后续顶层菜单项，到最后一项就会循环回队列头部也就是第一个顶层菜单项。

不要尝试通过监听方向键派发Tab事件实现效果：浏览器对JS合成的Tab键盘事件有安全限制，不会触发原生焦点遍历行为，这类hack写法兼容性极差，后续组件版本升级很容易出现不可预期的问题。

推荐两种稳定实现方案：

• 优先使用官方嵌套菜单实现
  替换自写的Collapse展开逻辑，改用MUI官方适配的嵌套菜单组件（可从@mui/material/MenuItem扩展实现，或使用@mui/lab提供的成熟嵌套菜单组件）。这类组件已经内置了符合WAI-ARIA规范的多级菜单键盘导航逻辑，自动处理跨层级焦点移动、展开收起联动、边界循环跳转等交互，改造成本最低，交互一致性最好。
• 手动覆写MenuList导航逻辑（适合保留现有Collapse交互的场景）
  通过MenuList暴露的onKeyDown事件拦截默认导航行为，自行维护可见菜单项的导航队列，核心实现步骤如下：
  1. 给所有菜单项（含顶层项、子菜单项）统一添加标记类名，例如navigable-menu-item
  2. 在onKeyDown回调中拦截ArrowUp、ArrowDown事件，调用e.preventDefault()阻止组件默认导航逻辑
  3. 每次触发方向键时，筛选出当前页面中所有未禁用、可见的菜单项，按DOM从上到下的顺序排列为导航队列（通过offsetParent !== null即可过滤掉Collapse收起状态下隐藏的子菜单项）
  4. 定位当前焦点元素在队列中的索引，根据方向计算下一个聚焦项的索引，直接调用目标元素的focus()方法完成焦点移动
     核心代码参考：

  const handleKeyDown = (e) => {
    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
    e.preventDefault();
  
    // 拉取当前所有可导航的菜单项
    const itemList = Array.from(
      document.querySelectorAll('.navigable-menu-item:not([disabled])')
    ).filter(item => item.offsetParent !== null);
  
    const currentFocusIndex = itemList.indexOf(document.activeElement);
    const lastIndex = itemList.length - 1;
    let nextIndex;
  
    if (e.key === 'ArrowDown') {
      nextIndex = currentFocusIndex === lastIndex ? 0 : currentFocusIndex + 1;
    } else {
      nextIndex = currentFocusIndex === 0 ? lastIndex : currentFocusIndex - 1;
    }
  
    itemList[nextIndex].focus();
  };
  
  // 传入MenuList组件，所有MenuItem统一添加标记类名即可
  <MenuList onKeyDown={handleKeyDown}>
    {/* 菜单项内容 */}
  </MenuList>
  

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