paper-dialog handle onclose in component class

Question

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

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

The documenation 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()
            {
                console.log("closing");
            }

Cappittall · Answer 1 · 2019-03-15T12:13:43.320

1

If you define on-click method for both buttons explicitly, then you understand which button clicked ;

Demo

<div class="buttons">
    <paper-button dialog-dismiss on-tap="_cancelled">Cancel</paper-button>
    <paper-button dialog-confirm autofocus on-tap="_confirmed">OK</paper-button>
</div>

At script:

_cancelled(){
     console.log('Cancelled');

}
_confirmed(){
    console.log('Confirmed');
}

EDIT

As @Brett Sutton 'coment, on close of the paper-dialog, iron-overlay-closed event fired;

 <paper-dialog id="scrolling" on-iron-overlay-closed="_myClosedFunction">

at script;

  _myClosedFunction(c){
    console.log('Closed as ', c.detail); // canceled: false,  confirmed: true
  }

edited Mar 15 '19 at 12:13

answered Mar 14 '19 at 12:48

Cappittall

3,300
3
15
23

I'm using a class so its member methods aren't global. I've also read that using 'on-click' attributes is bad practice and that we should be using addEventListener. – Brett Sutton Mar 14 '19 at 21:58
@BrettSutton , plz check edited part whether is fit your need or not – Cappittall Mar 15 '19 at 12:14

score 0 · Answer 2 · answered Mar 15 '19 at 20:40

@HakanC your example lead me to the answer.

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>

paper-dialog handle onclose in component class

2 Answers2