context-menu breaks with-backdrop paper-dialog [v2.0.0]

[christophe-g]

Using context-menu breaks with-backdrop behavior for paper-dialog.

The reason is that

 _phoneChanged: function(phone) {
        if (!phone) {
          this.backdropElement.style.opacity = 0;
        }
     },

applies opacity = 0 style to global backdrop and is never removed. Hence no backdrop will be visible once a vaadin-context-menu has been applied.

Fix :

• remove `_phoneChangeObserver
• in vaadin-context-menu-overlay:

      listeners: {
        'iron-overlay-opened': '_onOverlayOpened',
        'iron-overlay-closed': '_onOverlayClosed',
      },

      _onOverlayOpened: function() {
        if(!this.phone) {
           this.backdropElement.style.opacity = 0;
        }
      },
      _onOverlayClosed: function() {
        if(!this.phone) {
           this.backdropElement.style.opacity = '';
        }
      },

[jouni]

I don’t think the backdrop should be managed with JS at all. The theme should decide if the backdrop is shown or not.

[christophe-g]

Agreed, I just wanted to provide a fix that does not change current 2.0.0 behavior and aligned with current code base.

But I am clearly not sure about the reason for forcing this.backdropElement.style.opacity = 0; as this is already handled in the backdropElement (iron-overlay-backdrop`) :

 <style>
      :host {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--iron-overlay-backdrop-background-color, #000);
        opacity: 0;
        transition: opacity 0.2s;
        pointer-events: none;
        @apply --iron-overlay-backdrop;
      }

      :host(.opened) {
        opacity: var(--iron-overlay-backdrop-opacity, 0.6);
        pointer-events: auto;
        @apply --iron-overlay-backdrop-opened;
      }
    </style>

So, it might be better to just remove _phoneChangeObserver.

btw, thanks for the Vaadin components, it's a pleasure to use them !

[web-padawan]

Closing as outdated and because Paper Elements are now deprecated.
Let's submit a new issue if this turns out to be a problem also with mwc-dialog.