event listen fire multiple times

[massimoliani]

On the new version of MDCSelect is not possible to use anymore tag. Using I have to insert the onchange event on the listened of MDCSelect class. When registering the event handler the system fire many and many onchange event everytime I make a change. I've seen this multiple event firing on some other components too implementing the listening paradigm. Any possible solutions? Thank you.

[treminaor]

What was the resolution? I am having this issue too.

[allan-chen]

Are you on the latest release?

[allan-chen]

#5570 and #5783 may be relevant. Both issues are resolved as of 7.0

[treminaor]

Assuming the CDN link is the latest release I am yes.
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>`

[treminaor]

Also it happens 8 times consistently on my end. If I create the MDCSelect:change event myself and dispatch it then it only fires once, behaving normally.

[allan-chen]

Here's a codepen where it seems to be behaving as expected: https://codepen.io/allanchenmdc/pen/MWKEqrK

Please feel free to fork it to reproduce your issue.

[luclorencini-zz]

Also it happens 8 times consistently on my end. If I create the MDCSelect:change event myself and dispatch it then it only fires once, behaving normally.

It's happering eigth times with me as well.

$(document).ready(function () {
const select = new mdc.select.MDCSelect(document.querySelector('#NivelAcesso'));
select.listen('MDCSelect:change', () => {
alert('hello');
});
})

This fire 8 alerts on screen.

[allan-chen]

@luclorencini - I have modified this codepen to include a version of your code and it only seems to fire once. Please feel free to fork it to reproduce your issue: https://codepen.io/allanchenmdc/pen/MWKEqrK

[treminaor]

@luclorencini - I have modified this codepen to include a version of your code and it only seems to fire once. Please feel free to fork it to reproduce your issue: https://codepen.io/allanchenmdc/pen/MWKEqrK

Is it possible we are doing something wrong which would produce this behavior in our local environments? I didn't reply anymore because I could not reproduce the issue in codepen. I fixed my local code with a "hack" to ignore the 7 erroneous event fires but that's not a fix it's just a bandaid.

[allan-chen]

Hi @treminaor,

From your previous comment it seems like you're using CDN for the latest version, and if that's confirmed we can rule out any MDC build problems or versioning issues (all components, esp select, menu, and list, must be at v7). I would try to get the absolute bare minimal version of the component running locally - with just the HTML and JS from the codepen + MDC CDN to start and see if the issue persists.

In essence, we're trying to first get an equivalent environment to the codepen locally, then see what digressions we can see from there.

CDN links reproduced for your ref:

• https://unpkg.com/material-components-web@7.0.0/dist/material-components-web.min.js
• https://unpkg.com/material-components-web@7.0.0/dist/material-components-web.min.css