Melt UI 中上下文子菜单首次初始化后失效问题分析

问题现象

在使用 Melt UI 构建上下文菜单时，开发者发现了一个影响用户体验的核心问题：当菜单中包含子菜单(submenu)时，首次打开上下文菜单可以正常通过悬停触发子菜单，但在关闭后再次打开上下文菜单时，子菜单功能完全失效。同时，键盘箭头导航功能也会出现同样的问题。

技术背景

Melt UI 是一个基于 Svelte 的 UI 组件库，提供了丰富的交互式组件构建能力。上下文菜单(Context Menu)是其重要功能之一，允许开发者为应用添加上下文敏感的右键菜单功能。子菜单作为上下文菜单的扩展功能，通常用于组织多层级菜单项。

问题根源分析

经过技术团队调查，这个问题主要源于 Melt UI 内部状态管理机制与 DOM 事件处理的交互问题。具体表现为：

1. 首次初始化正常：组件首次渲染时，所有事件监听器和状态绑定都正确建立
2. 二次打开失效：关闭菜单后，某些关键事件监听器未能正确重新绑定
3. 键盘导航问题：箭头键导航依赖的焦点管理在二次打开时出现异常

临时解决方案

在官方修复此问题前，开发团队建议使用以下临时解决方案：

const {
    states: { subOpen },
    elements: { subMenu, subTrigger },
} = createSubmenu({
    forceVisible: true  // 强制保持可见状态
});

配合 Svelte 的条件渲染：

{#if $subOpen}
    <div {...$subMenu} use:subMenu>
        <slot />
    </div>
{/if}

重要提示：需要特别注意 createSubmenu 返回的是 subOpen 状态而非 open，这是常见的误用点。

最佳实践建议

1. 统一状态管理：确保在应用中使用一致的菜单状态管理策略
2. 渐进增强：为关键功能提供备选交互方式，降低此类问题的影响
3. 版本跟踪：关注 Melt UI 的版本更新，及时获取官方修复

总结

这个问题虽然影响了 Melt UI 上下文菜单中子菜单的可靠性，但通过正确的配置和临时解决方案，开发者仍然可以在生产环境中使用这一功能。理解问题的本质有助于开发者更好地规避类似问题，并为未来的升级做好准备。