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

Question

Question:

How do I automatically execute a function whenever my <paper-dialog> element is closed?

Version: Polymer 1.0

Code:

<paper-dialog id="paper-id"
              entry-animation="scale-up-animation"
              exit-animation="scale-down-animation">
    <sample-element></sample-element>
</paper-dialog>

Binny

Answer 1

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)

Buonarroti

They are working to improve that. At the moment, I recommend exploring the linked Behaviors at the bottom of the page of a component, as the component will inherit any Properties or Methods of those Behaviors. Soon they will be able to include them directly in the component documentation, which should make events like these easier to find. – Buonarroti

Yes agree with you, Thanks a lot @Buonarroti – Binny

Thanks, @Zikes. Oddly, I couldn't get this to work. I defined an independent function that I passed in like you have above, but the callback wasn't firing. I got this to work using the method, addEventListener('iron-overlay-closed') instead. – Concretion

Answer 2

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

Utricle