Context Menu with clickable body

Flow
1

Hi here,
while migration our application from Vaadin 8 to 24 I came across the Context Menu.
Is it possible to prevent the Flow context menu to set pointer-events: none; to body when set opened?
In Vaadin 8, it is still possible to interact with the UI, what leads to closing the opened context menu, or when right clicking on a new target will open a new context menu. Users have noted that it slows down their usage.
Thanks for your help.

Edit: for MenuBar too :slight_smile:

2

There is no public API for this at the moment. See Option to make overlays non-modal · Issue #451 · vaadin/web-components · GitHub where the issue is being discussed.

1 Like
3

Technically you can just override the pointer-events: none with a stronger CSS rule, such as

body {
  pointer-events: auto !important;
}

, but then it becomes more tricky if you want it to only happen for ContextMenu and MenuBar and not e.g. modal Dialogs. You can maybe listen to suitable events such as https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha7/#/elements/vaadin-context-menu#event-opened-changed and toggle an attribute on the body element.

4

While I tested the stronger CSS rule too, I got a strange behavior in the grid context menu. Only every second or thrid right click the item was null in dynamic content handler.
Further that leads to possibility to have multiple Menu bars and one context menu open at the same time.

Look at this:
image