在 vaadin 24 中，menubar 默认点击任意 menuitem 后会立即关闭下拉菜单；本文提供一种基于事件拦截的可靠方案，通过自定义装饰器阻止默认关闭行为，实现多次连续点击同一菜单项的功能。
在 vaadin 24 中，menubar 默认点击任意 menuitem 后会立即关闭下拉菜单；本文提供一种基于事件拦截的可靠方案，通过自定义装饰器阻止默认关闭行为，实现多次连续点击同一菜单项的功能。
Vaadin 24 的 MenuBar 组件设计为“点击即执行并自动收起”，这一行为虽符合典型下拉菜单交互逻辑，但在需要重复触发操作（如增/减计数器、切换状态按钮）的场景中显得不够灵活。官方尚未原生支持“点击不关闭”选项（GitHub Issue #1005 已确认为已知遗漏），但可通过前端事件干预实现稳定绕过。
核心思路是：在菜单项（MenuItem）的点击事件中调用 event.preventDefault()，阻止 Vaadin 内部默认的关闭逻辑，同时确保 UI 状态更新（如勾选态）仍能正确同步。
以下是一个轻量、可复用的工具类 RetainOpenedMenuItemDecorator：
public class RetainOpenedMenuItemDecorator {
private static final String CHECKED_ATTR = "menu-item-checked";
private final MenuItem menuItem;
public RetainOpenedMenuItemDecorator(MenuItem menuItem) {
this.menuItem = menuItem;
// 拦截原生 click 事件，阻止默认关闭行为
menuItem.getElement().addEventListener("click", e -> {
if (!menuItem.isCheckable()) return;
// 手动同步 checked 状态到 DOM 属性（因 preventDefault() 会阻断内部状态更新）
if (menuItem.isChecked()) {
menuItem.getElement().executeJs("this.setAttribute('" + CHECKED_ATTR + "', '')");
} else {
menuItem.getElement().executeJs("this.removeAttribute('" + CHECKED_ATTR + "')");
}
}).addEventData("event.preventDefault()");
}
public static void keepOpenOnClick(MenuItem menuItem) {
new RetainOpenedMenuItemDecorator(menuItem);
}
// 支持批量处理 SubMenu 下所有子项
public static void keepOpenOnClick(SubMenu subMenu) {
subMenu.getItems().forEach(RetainOpenedMenuItemDecorator::keepOpenOnClick);
}
}
使用方式非常简洁，只需在创建菜单项后调用静态方法即可：
MenuBar menu = new MenuBar(); MenuItem increaseItem = menu.addItem(VaadinIcon.PLUS.create(), event -> increase()); MenuItem decreaseItem = menu.addItem(VaadinIcon.MINUS.create(), event -> decrease()); // 关键：应用装饰器，使点击后菜单保持展开 RetainOpenedMenuItemDecorator.keepOpenOnClick(increaseItem); RetainOpenedMenuItemDecorator.keepOpenOnClick(decreaseItem);
⚠️ 注意事项：
- 该方案依赖 event.preventDefault() 拦截原生事件，因此必须在 addItem(...) 返回 MenuItem 实例后立即调用，不可延迟至布局附加后；
- 若菜单项启用了 setCheckable(true)，需确保手动维护 DOM 属性与 Java 端 isChecked() 的一致性（如上例所示）；
- 不建议对含子菜单（SubMenu）的根项直接使用此装饰器——应优先考虑使用 SubMenu 构建层级结构，再对子项应用 keepOpenOnClick；
- 此方案兼容 Vaadin 24.3+（基于 Flow 24.x 和 Web Components v24），不适用于旧版 Vaadin 14 或 23。
总结而言，虽然 Vaadin 尚未提供开箱即用的 setAutoClose(false) API，但通过精准的前端事件控制与状态桥接，我们完全可以在不侵入框架源码的前提下，安全、可维护地实现“菜单常驻”交互体验。
