Vaadin Grid-Pro编辑时ESC按键事件处理及冲突解决问询

遇到这种情况，核心是要让Grid-Pro的ESC按键事件不再向上冒泡，或者让按钮在编辑状态下不响应快捷键，下面给两种可行的解决办法：

方法1：拦截Grid-Pro的ESC按键并阻止事件冒泡 #

在Flow代码里给Grid-Pro添加客户端事件监听器，捕捉ESC键的按下事件，先阻止冒泡，再保留原本的退出编辑逻辑。代码示例：

gridPro.getElement().addEventListener("keydown", event -> {
    // 客户端脚本处理逻辑
}).setScript("""
    if (event.key === 'Escape') {
        event.stopPropagation();
        // 触发Grid-Pro编辑器的取消操作，保留原有退出功能
        const editor = this.querySelector('vaadin-grid-pro-editor');
        if (editor && editor.opened) {
            editor.cancel();
        }
    }
""");

方法2：在按钮侧判断编辑状态再执行逻辑 #

如果不想改动Grid-Pro的事件行为，也可以在绑定ESC快捷键的按钮里，先检查Grid-Pro是否处于编辑状态，只有非编辑状态才执行按钮操作。代码示例：

Button escActionButton = new Button("执行ESC操作");
escActionButton.addClickShortcut(Key.ESCAPE);
escActionButton.addClickListener(e -> {
    // 异步查询Grid-Pro是否有活跃编辑器
    boolean inEditingState = (boolean) gridPro.getElement().executeJs("""
        const editor = this.querySelector('vaadin-grid-pro-editor');
        return editor && editor.opened;
    """).toCompletableFuture().join();
    
    if (!inEditingState) {
        // 这里写按钮原本的业务逻辑
    }
});

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