search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
447 stars 83 forks source link

[overlay] Modality is not working if an element uses pointer-events: auto #582

Open jouni opened 5 years ago

jouni commented 5 years ago

Using pointer-events: auto on any element on the page makes that element interactable again. This breaks the modality of overlays without a visible backdrop.

jouni commented 5 years ago

One solution proposal: make the backdrop “visible” for all modal overlays, and set opacity: 0 when the backdrop should not be visible.

Update: the suggested solution breaks the current behavior in combo box date/time pickers, where you can still interact with the field and the toggle button when the overlay is open. This can potentially be solved with elementFromPoint.

mstahv commented 5 years ago

My first ever Vaadin 10 app has a blocker because of this. It is using https://vaadin.com/directory/component/tinymce-for-flow in a Dialog, the whole app becomes broken because of this when using link addition tool (TinyMCE has it's own modal dialog).

mstahv commented 5 years ago

My beautiful workaround for the issue:

@Override
public void open() {
    setCloseOnOutsideClick(false);
    super.open();
    UI.getCurrent().getPage().executeJavaScript("setTimeout(function(){document.body.style.pointerEvents = \"\";}, 1000);");
}