paper-dialog not opening when called from CustomEvent

[CajunDust]

Description

I having trouble opening a paper-dialog when this is called via a dispatchEvent that is sent via another component. This triggers the overlay, but the dialog is never shown.

I have the following components setup:

• a general parent component containing 2 iron-pages with custom child-pages, and a listener for the fired event
• a first page component : this has a button firing a custom event
• a second page component : containing a function for opening a paper-dialog.

Expected outcome

• a dialog opening via the second child component, when a CustomEvent is fired via dispatchEvent on the first child component...

The goal is that via a dispatched event, from first child page component, this is captured by the parent component, and a method is called on the second page component, opening a paper-dialog. This works fine when the event is fired and captured on the same component, but not when different components are in play...

Actual outcome

The paper-dialog does not open. Instead only the backdrop is activated. No errors or console traces.

Example Snippet Code

// --- PARENT COMPONENT ---
<dom-module id="parent-comp">
<template>
//....
<div class="main-frame">
  <iron-pages id="pages" selected="[[state]]" attr-for-selected="state" fallback-selection="first">
    <child-page-component id="first" state="first"></child-page-component>
    <child-page-component id="second" state="second"></child-page-component>
  </iron-pages>
/....
<template>
//....
<script>
   class ParentPage extends Polymer.Element {
      // ... all needed stuff...

      ready(){
        super.ready();
        // LISTEN FOR event 'test-dialog' !!
        this.addEventListener('test-dialog', (e) => this._onTestEvent(e));
      }

      //...

      _onTestEvent(e){
         // When event is hit, call the second child method...
         this.$.second.callTestEvent();
      }
   }
   //....
 </script>

2. In the first child-component, there is a button triggering a dispatchEvent that is captured by the parent...

 //....
  <paper-button raised on-tap="_test">Test</paper-button>
  // ....
  <script>
      class ChildPageComponent extends Polymer.Element {
      //....
      _test(){
          // FIRE CUSTOM EVENT 'test-dialog'
          this.dispatchEvent(new CustomEvent('test-dialog', {
              bubbles: true, composed: true, detail: {}
          }));
      }
     //....

3. In the second child-component, there is a dialog definition, and a function that can be called from the parent.

// ....
 <paper-dialog id="dialogtst" modal>
    <div>
       <h1>hello</h1>
    </div>
    <div class="buttons">
       <paper-button dialog-confirm>Close</paper-button>
    </div>
 </paper-dialog>
 // ....

 // ....
 <script>
     class ChildPageComponent extends Polymer.Element {

     //....
     callTestEvent(){
         // Open Dialog....
         this.$.dialogtst.open();  // SHOULD OPEN RIGHT??
     }
    //....

Effect

As said, the full screen is overlayed with the modal backdrop, and no dialog is shown. It all works when called via a button directly, on any of the components, or when the event is capured in the same component... But not when it is passed to the parent...

Browsers Affected

• [X ] Chrome
• [X ] NW-JS
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10