Material-components-web: MDC Dialog: the number of listeners continuously grows

[robzenn92]

What MDC-Web Version are you using?

0.9.0

What browser(s) is this bug affecting?

All, all latest versions

What OS are you using?

MAC OS Sierra 10.12.4 (16E195)

What are the steps to reproduce the bug?

Suppose that I have two buttons: "button 1" and "button 2" and I share a single dialog that has to be shown whenever I click on "button 1" or "button 2".

Suppose that I have two functions: show_dialog_1 and show_dialog_2 that are triggered once based on the click on "button 1" or "button 2" respectively.

Suppose that within those functions, I attach to the dialog different listeners based on the button I click within the dialog itself (e.g. "Accept" or "Decline").

I have a jsfiddle.

When I click on "button 1" the function show_dialog_1 is triggered and the dialog is shown.
When I click on "Accept" the event attached to "Accept" in within the show_dialog_1 function is triggered.
When I click on "button 2" the function show_dialog_2 is triggered and the dialog is shown.
Continue..

What is the expected behavior?

When I click on "Accept", only the events attached to "Accept" within the show_dialog_2 function should be triggered.

What is the actual behavior?

When I click on "Accept", the event attached to "Accept" within both the show_dialog_1 and show_dialog_2 function are triggered.

Any other information you believe would be useful?

Since dialog is a local variable, I tried also using dialog.destroy() at the end of each listener function.
I tried also with a global dialog variable, however the functions show_dialog_1 and show_dialod_2 are triggered many times so I would like to have a simple way to unlisten all the attached events.

[anton-kachurin]

There is unlisten method which takes exactly the same parameters as listen. Try this.

I'm wondering why would you create a new MDCDialog instance every time the dialog needs to be displayed? You could just create two instances on the page load and call show, like so.

[robzenn92]

Thanks @anton-kachurin for the reply, I would say that the first solution you posted is the one I was looking for. For the second question, the reason was just for demo purpose.

However, what I wanted to point out is that, from my point of view, in you solution there are a couple of drawbacks:

• First, you need to define the handlers within the function show_dialog otherwise you cannot call the unlisten method. I would say that you should be flexible to define something like dialog.listen('MDCDialog:accept', foo); where foo is defined somewhere else. However, I am not sure if this is a bad practice since foo depends on show_dialog.

• Second, you always need to define an handler for the cancel event just to invoke unlisten() (and so unlisted the accept event), while sometimes I don't care if the user click on "Decline" because I just want the dialog disappears (normal behaviour).

Let me know what you think about it, I just want to understand whether there is a better way or there is a limitation that we could overcome.

[anton-kachurin]

Since listen and unlisten are simple wrappers around the native addEventListener and removeEventListener you can opt-out of using them and use any technique of handling events of your choice. jQuery provides on and off methods, and while on is similar to MDC's listen, off is very likely what you're looking for.

https://jsfiddle.net/smjtmmjf/

In this fiddle I'm clearing all previous event handlers before attaching new ones by chaining the .off() call with no arguments.

[traviskaufman]

Hey @robzenn92 ,

So @anton-kachurin's solution definitely works. I'd recommend instantiating the dialog at initialization time. I'd also recommend using two distinct DOM elements for two distinct dialogs.