Button waves-effect doesn't return to original state by itself.

“materialize-css”: “^0.97.7”, <button class="btn waves-effect waves-light" onclick="{updateRoles}" >Submit</button>

I am using this via webpack.

When I click the button the wave effect happens, and continual clicking makes my button whiter and whiter. It never returns to its original state. So now I am sitting here with a completely white button.

Oddly enough, if I move my mouse over and over on the button, it slowly comes back.

I wish I could repo those on codepen. My project is simple and build-able here and repos the issue. Any material button has the problem

https://github.com/ghstahl/riotjs-materializecss-webpack

[ghstahl]

found my solution using this thread. https://github.com/Dogfalo/materialize/issues/2667

heneryville: You’ll get this behavior if you’ve included the materialize javascript more than once on the page.

I am using webpack and had this import import ‘./js/materialize.js’; in multiple places.

I only have it in my vendor.js file now and waves work properly.

[Jayanta227]

thanks @ghstahl , i was facing same problem and i was using with react project. I imported the materialize.js like import M from ‘Materialize-css’; and also in the script tag using the cdn link.

after i removed the cdn link, it was working fine