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 not 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 dialog.
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... The paper-dialog does not open. Instead only the backdrop is activated.
Below some snippets of code (not complete to keep things compact) :
1)The parent component, containing the 2 children & having a listener
<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??
}
//....
But 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...
Can someone explain why and how to get it working ? All advice is very much appriciated !
