paper-dialog handle onclose in component class

Flow
1

I’m trying to use the ‘paper-dialog’ tag for Polymer 2 in a web component.

Note: I’ve attached a full sample which demonstrates the problem.

I’m trying to detect when the user clicks the cancel button vs the save/ok button.

The documentation says to create an event for ‘iron-overlay-closed’ to detect when the OK/Save button is clicked.

My problem is that the ‘iron-overlay-closed’ is firing even when I click the cancel button.

From my reading of the documentation only the button with dialog-confirm attribute should cause the event to fire.

<paper-dialog modal backdrdop id="dialog">
        <h2>Select Time</h2>
        <paper-dialog-scrollable>
            <div slot="body">
                <p>Body is here</p>
            </div>
        </paper-dialog-scrollable>
        <div id="dialog-buttons">
            <paper-button dialog-dismiss>Cancel</paper-button>
            <paper-button dialog-confirm autofocus>Save</paper-button>
        </div>
    </paper-dialog>

The below open method adds the listener.
The fireCallback method is then closed regardless of whether I click Save or Cancel.

			open()
            {
                this.$.dialog.addEventListener('iron-overlay-closed', ()=> {this.fireCallback()});
                this.$.dialog.open();
            }

           
            fireCallback(e)
            {
            	// called when either cancel or Save is clicked.
               	console.log("closing");
            }

17564571.html (1.62 KB)

2

OK I found the answer with some help @HakanC from stackoverflow.

The problem was that I was missing the import for:

<link href="../../../bower_components/iron-overlay-behavior/iron-overlay-behavior.html" rel="import">

Without the import my addEventListener was always firing but the ‘confirmed’ field in the details object that came back with the event was always false.

So my two problems were:

  1. didn’t realise I was missing an import
  2. expected the event to only fire when I clicked save
  • it fires for cancel and save and you need to check the ‘confirmed’ field to see which button was actually clicked.

So the final dialog was:

<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import"	href="../../../bower_components/paper-dialog/paper-dialog.html">
<link href="../../../bower_components/iron-overlay-behavior/iron-overlay-behavior.html" rel="import">
	
<dom-module id="dialog-test"> 
<template>
	<style include="shared-styles">
	:host {
		display: block;
		margin: 5px;
		height: 100%;
	}
	
	paper-dialog {
		width: 100%;
		margin: 0px;
	}
	
	#dialog-buttons {
		display: flex;
		justify-content: space-between;
	}
	</style>
	 
	<paper-dialog modal backdrdop id="dialog">
		<h2>Select Time</h2>
		<paper-dialog-scrollable>
			<div slot="body">
				<p>Body is here</p>
			</div>
		</paper-dialog-scrollable>
		<div id="dialog-buttons">
			<paper-button dialog-dismiss>Cancel</paper-button>
			<paper-button dialog-confirm autofocus>Save</paper-button>
		</div>
	</paper-dialog> 

</template> 
<script>
        class DialogTest extends Polymer.Element {


            static get is() {
                return 'dialog-test';
            }

            static get properties() {
                return {
                  
                };
            }
   
            open()
            {
                this.$.dialog.addEventListener('iron-overlay-closed', (e)=> {this.fireCallback(e)});
                this.$.dialog.open();
            }
           
            fireCallback(e)
            {
            	console.log(e.detail);
            	if (c.detail.confirmed == true)
           		{
	                console.log("saving")
           		}
            }

            connectedCallback()
            {
                super.connectedCallback();
                this.open();
            }
        }
        customElements.define(DialogTest.is, DialogTest);
    </script> </dom-module>