How do I execute a function on-close or on dismiss of <paper-dialog> for Polymer 1.0?

paper-dialog inherits the Polymer.IronOverlayBehavior, which has the iron-overlay-opened and iron-overlay-closed events.

<paper-dialog
  on-iron-overlay-opened="_myOpenFunction"
  on-iron-overlay-closed="_myClosedFunction"></paper-dialog>
  • https://www.webcomponents.org/element/@polymer/iron-overlay-behavior
  • code: https://github.com/PolymerElements/iron-overlay-behavior/blob/master/test/iron-overlay-behavior.html (for example: take a look at line 147 for the iron-overload-opened event)

Even this is old topic, there is still 1 thing that people should know and be aware of:

I highly recommend you to also check event.target inside your listener function. For example, if you have another element using iron-overlay inside paper-dialog, closing that elements will trigger listener on paper-dialog. (you can try this with vaadin-date-picker).

So:

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

and then _myClosedFunction:

_myClosedFunction(e) {
  if(e.target.nodeName == "PAPER-DIALOG") {
    //...toDo stuff...
  }
}

Now you are guaranteed that whenever only paper-dialog is closed, your code will be executed