web-components
web-components copied to clipboard
[context-menu] When context-menu is opened second right-click should re-open it
If you right-click again when the context menu is opened, right now it closes the menu, but it should reopen again in the new position. That is the way context-menus work natively in OS.
Might be related: we are trying to enable displaying platform context menu when right-clicking on a context menu item.
https://github.com/vaadin/vaadin-context-menu/blob/v4.3.15/src/vaadin-context-menu.html#L717-L722 shows it can already be achieved with holding Shift, but this is non-obvious to most people.
Is there any way (add event handler?) other than subclass and override _onGlobalContextMenu()
?
Workaround for that is to remove the style "pointer-event:none" from the body. This is automatically applied, when the context menu is opened, e.g. calling javascript document.body.style.pointerEvents = "auto";
. Only issue here is, that on the reopen, the CM is a bit laggy (but a way one can live with I think)
@stefanuebe This workaround does not work for us, when the content of the contextual menu is dynamically generated regarding the clicked item.
By using the following code, when an item of the grid is right-clicked, the corresponding contextual menu is displayed. When another item is right-clicked, the first menu is closed, and another one is opened, but its content is the same as the first one, whereas other entries were expected. When right-clicking another item again in the grid, the menu is closed, and the menu corresponding to the previously clicked item is opened. Notice that when debugging, the person
variable is actually corresponding to the clicked item.
ctxMenu.setDynamicContentHandler(person -> {
ctxMenu.removeAll();
ctxMenu.addItem("Log person", this::logId);
if(person.getId() % 2 == 0){
ctxMenu.addItem("Even person", e->log(e.getSource().getText()));
}
else{
ctxMenu.addItem("Odd person", e->log(e.getSource().getText()));
}
UI ui = UI.getCurrent();
if ( ui != null) {
ui.getPage().executeJs("setTimeout(function(){document.body.style.pointerEvents = \"auto\";}, 500);");
}
return true;
});