How to change/override property pointer-event in a Vaadin dialog

Question

We have a third party application (launch button only) which is always shown on top most in our application. It works fine except for modal dialogs which prevent interaction. After some digging, we noticed the style "pointer-events:none;" causes the issue. vaadin-dialog-overlay inherits the property.

We tried to resolve the issue by extending dialog, set pointer-events to auto when dialog is created

UI.getCurrent().getElement().getStyle().set("pointer-events", "auto");

and remove pointer-events when dialog is closed.

UI.getCurrent().getElement().getStyle().remove("pointer-events");

Unfortunately this solution works only in some cases. We also tried to change the property in openChangeListener.

Please help. We are using Vaadin 14.

Thanks you in advance.

Answer 1

You can make it a non-modal:

Dialog dialog = new Dialog();

dialog.setModal(false);

https://vaadin.com/docs/latest/components/dialog/#modality