Chakra UI中嵌套菜单与上下文菜单的交互问题解析

问题现象

在使用Chakra UI构建复杂菜单交互时，开发者可能会遇到一个典型问题：当尝试在上下文菜单(Context Menu)触发器容器内嵌套常规菜单时，会出现菜单行为异常。具体表现为初始状态下鼠标悬停在"Action"按钮上会打开嵌套菜单，但通过点击按钮打开菜单后再进行悬停操作时，嵌套菜单会意外关闭。

技术背景

Chakra UI的菜单系统设计遵循了WAI-ARIA标准，提供了Menu和ContextMenu两种组件。这两种组件虽然功能相似，但交互逻辑存在差异：

• 常规菜单(Menu)：通常由点击或悬停触发
• 上下文菜单(ContextMenu)：通常由右键点击触发

当开发者尝试在ContextMenuTrigger容器内嵌套常规菜单时，系统会误判为创建"嵌套菜单"结构，导致交互逻辑冲突。

解决方案

正确的实现方式应该是将两种菜单视为同级关系而非嵌套关系。以下是实现要点：

1. 分离菜单结构：将上下文菜单和常规菜单作为两个独立的组件
2. 手动控制状态：使用useState显式控制常规菜单的打开状态
3. 定位处理：通过getAnchorRect精确控制菜单弹出位置
4. 交互边界处理：使用onInteractOutside处理菜单外的交互事件

实现示例

function App() {
  const [open, setOpen] = useState(false);
  const buttonRef = useRef<HTMLButtonElement>(null);
  
  return (
    <>
      <MenuRoot
        positioning={{
          getAnchorRect: () => buttonRef.current!.getBoundingClientRect(),
        }}
        onInteractOutside={(e) => {
          const target = e.detail.originalEvent.target as HTMLElement | null;
          if (buttonRef.current!.contains(target)) {
            e.preventDefault();
          }
        }}
        open={open}
        onOpenChange={(e) => setOpen(e.open)}
      >
        <MenuContent>
          <MenuItem value="action">常规菜单项</MenuItem>
        </MenuContent>
      </MenuRoot>
      
      <MenuRoot>
        <MenuContextTrigger asChild>
          <Stack p="10" bg="lightgray" height="500px" width="500px">
            <Button ref={buttonRef} onClick={() => setOpen((c) => !c)}>
              操作按钮
            </Button>
          </Stack>
        </MenuContextTrigger>
        <MenuContent>
          <MenuItem value="action">上下文菜单项</MenuItem>
        </MenuContent>
      </MenuRoot>
    </>
  );
}

关键点解析

1. 引用传递：通过buttonRef将按钮DOM引用传递给常规菜单，确保准确定位
2. 交互控制：onInteractOutside中判断点击目标是否在按钮范围内，防止意外关闭
3. 状态管理：使用open和onOpenChange显式控制菜单状态
4. 组件分离：两个菜单组件在结构上完全独立，仅通过状态和引用关联

最佳实践建议

1. 避免在ContextMenuTrigger内直接嵌套Menu组件
2. 对于复杂菜单交互，优先考虑显式状态管理
3. 注意菜单的定位和层级关系，确保视觉一致性
4. 充分考虑无障碍访问需求，确保键盘导航正常

通过这种实现方式，开发者可以构建出既符合用户预期又保持良好交互体验的菜单系统，同时避免了组件间的逻辑冲突。