Alibaba-Fusion/Next 中 Dropdown 嵌套 SubMenu 的点击关闭问题解析

问题现象

在使用 Alibaba-Fusion/Next 组件库时，开发者可能会遇到一个特定的交互问题：当 Dropdown 组件中嵌套了 Menu 和 SubMenu 时，点击 SubMenu 项会导致整个 Dropdown 意外关闭。具体表现为：

1. 用户点击 Dropdown 触发器（如"Hello"按钮）
2. 展开第一级菜单（如"1"）
3. 点击第二级菜单项（如"2"）
4. 期望显示第三级内容（如"3"）
5. 实际结果是第三级内容短暂闪现后，整个 Dropdown 关闭

技术原理分析

这个问题的根本原因在于 Dropdown 组件的关闭机制和 SubMenu 的渲染位置：

1. Dropdown 的关闭逻辑：Dropdown 组件默认会在用户点击组件外部时自动关闭。它通过监听文档级的点击事件来判断点击是否发生在组件内部。

2. SubMenu 的渲染方式：SubMenu 的内容通常是通过 Portal 渲染到文档的其他位置（如 body 下），而不是直接作为 Dropdown 的子元素。

3. 事件冒泡机制：由于 SubMenu 内容不在 Dropdown 的 DOM 树中，Dropdown 无法感知这些点击事件属于组件内部交互，误判为用户点击了外部，从而触发关闭。

解决方案

针对这个问题，Alibaba-Fusion/Next 提供了 safeNode 属性作为解决方案：

<Dropdown 
  followTrigger 
  align="bl tl" 
  trigger={<div>Hello</div>}
  safeNode={() => document.querySelectorAll('.next-menu')}
>
  <Menu mode="popup">
    <SubMenu label="1">
      <PopupItem label="2" triggerType="click">
        3
      </PopupItem>
    </SubMenu>
  </Menu>
</Dropdown>

解决方案原理

1. safeNode 属性：允许开发者指定哪些 DOM 节点应该被视为 Dropdown 的"安全区域"。

2. 选择器匹配：通过传入一个返回 NodeList 的函数，我们可以将所有 Menu 相关的 DOM 节点标记为安全节点。

3. 点击判断：当用户点击这些安全节点时，Dropdown 不会触发关闭逻辑，从而保持菜单的展开状态。

最佳实践建议

1. 复杂菜单结构：对于多层嵌套的菜单，确保为每一层菜单元素都包含在 safeNode 选择器中。

2. 性能考虑：如果菜单结构非常复杂，可以考虑缓存选择器结果，避免每次点击都重新查询 DOM。

3. 样式隔离：确保自定义的 Menu 样式不会影响 safeNode 的选择器匹配。

4. 动态内容：如果菜单内容是动态生成的，需要确保 safeNode 选择器能够匹配到动态添加的元素。

总结

通过理解 Dropdown 和 SubMenu 的交互机制，我们可以有效地解决多层菜单点击意外关闭的问题。safeNode 属性提供了一种灵活的方式来定义哪些交互应该被视为菜单内部操作，从而保持用户体验的连贯性。这种解决方案不仅适用于当前场景，也可以推广到其他需要复杂交互的弹出式组件中。