paper-menu-button icon indicating copy to clipboard operation
paper-menu-button copied to clipboard

`iron-overlay-closed` event bubbles up unexpectedly

Open valdrinkoshi opened this issue 9 years ago • 6 comments

From @morficus on November 10, 2015 4:24

Use case: when using a <paper-dropdown-menu> element is contained with in a <paper-dialog> element, the iron-overlay-closed listener gets triggered when the <paper-dropdown-menu> is closed.

Impact: the function registered to the listener gets triggered at unexpected times

Demo: https://jsbin.com/sugocaguva/edit?html,output

Copied from original issue: PolymerElements/paper-dropdown-menu#87

valdrinkoshi avatar Jul 01 '16 13:07 valdrinkoshi

From @kriscooke on December 9, 2015 8:7

+1 Not sure why/whether it's supposed to bubble up... If so, then we need a more specific 'closed' event from paper-dialog. Particularly hazardous for common 'closed' listeners like form.reset()!

In my case, making a selection from the paper-dropdown causes the form to be unexpectedly reset.

valdrinkoshi avatar Jul 01 '16 13:07 valdrinkoshi

From @cdata on January 29, 2016 21:57

This sounds reasonable. These events probably shouldn't bubble.

@valdrinkoshi do you have any opinions about this?

valdrinkoshi avatar Jul 01 '16 13:07 valdrinkoshi

Yeah it makes sense, the event shouldn't bubble. But I don't know if this should be fixed in iron-overlay-behavior to fire an event that doesn't bubble, or handle it in the paper-dropdown-menu..

valdrinkoshi avatar Jul 01 '16 13:07 valdrinkoshi

From @fakiolinho on February 11, 2016 15:21

Maybe an idea would be the option to attach the event to an emitter. So if an emitter's id is provided we can understand who emits it and respond accordingly. If the emitter's id is omitted the event can be caught by everyone as usual:

listeners: {
    'dialogID.iron-overlay-closed': '_modalClosed',
    'dropdownMenuID.iron-overlay-closed': '_menuClosed'
},
_modalClosed: function(e) {

},
_menuClosed: function(e) {

}

So i could respond on those 2 using separate methods. At the very moment in order to tackle the event bubbling and respond only if the event is triggered by the paper-dialog element i am doing this:

...
_modalClosed: function(e) {
    if (e.srcElement.id == 'dialogID') {
        // do sth here
    }
},
...

valdrinkoshi avatar Jul 01 '16 13:07 valdrinkoshi

related to https://github.com/PolymerElements/iron-overlay-behavior/issues/70, see proposed solution. Changing the event to non-bubble would be a breaking change, so I'd suggest to use the proposed solutions & close this issue.

valdrinkoshi avatar Jul 01 '16 13:07 valdrinkoshi

Will move this issue to paper-menu-button as it has already 2 other events for opening/closing, and it should be the one stopping the propagation of iron-overlay-opened/closed/canceled

valdrinkoshi avatar Jul 01 '16 13:07 valdrinkoshi