How do I execute a function on-close or on dismiss of 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>

score 14 · Accepted Answer · edited Mar 01 '19 at 13:05

14

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)

edited Mar 01 '19 at 13:05

Derk Jan Speelman

11,291
4
29
45

answered Jun 12 '15 at 19:12

Zikes

5,888
1
30
44

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. – Zikes Jun 12 '15 at 20:49
Yes agree with you, Thanks a lot @Zikes – Harsha Kakumanu Jun 12 '15 at 20:57
5

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. – Con Antonakos Jun 14 '15 at 23:31

score 4 · Answer 2 · answered Aug 22 '17 at 11:28

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

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

2 Answers2