Button waves do not disappear after click

Here is an example of a button that was pressed. As you can see, the lightening due to the wave does not disappear after click. The button is defined as <button id="uploadphoto" class="waves-effect waves-light btn">Upload Photo</button>

The same issues does not occur when using the materialize:materialize package. This suggests that it is an issue with the Sass compilation. I compiled v0.97.5 Sass with fourseven:scss for Meteor. It may be an issue with Libsass incompatibility with older indented sass syntax as mentioned in the README of fourseven/meteor-scss.

[heneryville]

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

[OzzyTheGiant]

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

If you’re on angular and you can’t use ngx-materialize (because it hasn’t been updated to be compatible with materialize-css 1.0), and you need to M.Init() some components, remove materialize.min.js from your scripts in the angular.json file and import * as M and then add M as a provided value in a ‘shared’ module that you can import across your app. You then @Inject() it into whatever component you need so that you can M.AutoInit() during your lifecycle hooks. Doing this will prevent materialize from being imported several times. Here’s a sample shared.module.ts file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as M from 'materialize-css/dist/js/materialize';

@NgModule({
	imports: [
		CommonModule
	],
	declarations: [],
	providers:[
		{provide:'M', useValue:M}
	],
  	exports: [
		  CommonModule
	]
})
export class SharedModule { }

your component would look something like this (I’m using a materialize modal dialog box component):

import { Component, OnInit, OnDestroy, ViewChild, AfterViewInit, Inject } from '@angular/core';
import * as M from 'materialize-css/dist/js/materialize';

@Component({
    selector: 'dialog-box',
    templateUrl: './dialog-box.component.html',
    styleUrls: ['./dialog-box.component.scss']
})
export class DialogBoxComponent implements OnInit, AfterViewInit, OnDestroy {
    @ViewChild('dialogBox') elementRef: any;
    materializeBinding: any;

    constructor(@Inject('M') private M: any) {}

    ngOnInit() {}

    open() {
        this.materializeBinding.open();
    }

    ngAfterViewInit() {
	this.materializeBinding = M.Modal.init(this.elementRef.nativeElement);
    }

    // ...other code omitted for brevity
}