Materialize: Button waves do not disappear after click

[parthibanloganathan]

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.

[wunderg]

I have the same problem

[ghost]

Yeah, this is happened to me too, to reproduce this issue, you have to create a btn with waves on and click it for a long time, this btn should have some thing like "#" in the href, i mean this bnt dont teleport you to another page this can be seen in the web page as example chifrebird.blogspot.com(nav bar ; doesn't apply on the Home btn cause it refresh the page) if you hver over the btn again the effect will be gone.

[eGeekster]

A brief preface here: I'm not using SASS, so this may be unhelpful for @parthibanloganathan , but I figured I'd offer my two cents here in the hopes that it might help.

I noticed something very similar when testing our new design against various devices and browsers. Particularly with Microsoft's new Edge Browser & Internet explorer. As @chifreaigle mentioned, the occurrence was easiest to reproduce by clicking for a long time (or very rapidly!), although occasionally it would occur from a single click.

I replaced all occurrences of avascript:void(0)"... and this appears to have corrected the issue in my particular case. Have you given that a try? Might be an easy fix ;-)

At any rate, I hope this helps someone! Kudos to the Materialize team for their work on this framework! Thanks!

[parthibanloganathan]

Found a solution by building from source. See https://github.com/Dogfalo/materialize/issues/2651. The packaged distribution seems to be buggy.

[heneryville]

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

[ExoMemphiz]

If people are having trouble with this, follow heneryville's advice.

I was importing the files in multiple pages in my React app, but because App renders regardless for me, and then renders other components (that were also importing materializecss) the buttons were having the weird effect of staying coloured, but after going through all my components and pages and removing the imports, it works!

Thank you, @heneryville :)

[fega]

so it looks that this Issue is related with a duplicate event listener, Materialize shouldn't duplicate it.

[Dogfalo]

Fixed by #4474

[moh3n9595]

I have same problem and I not duplicated Materialize! (using Ionic 2)
index.ts :

  <link rel="stylesheet" href="plugin/materialize.min.css">
  <script src="plugin/jquery-3.2.1.min.js"></script>
  <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>

app.module.ts :

import 'materialize-css';
import { MaterializeModule } from 'angular2-materialize';
 imports: [

    MaterializeModule,

  ]

EDITED :
My problem is very weird! when I call Raven.install() (sentry.io - error reporting) ,materializecss waves not working

Raven
    .config('https://[email protected]/220198',
      {
        release: '1.0.0',
        dataCallback: data => {

          if (data.culprit) {
            data.culprit = data.culprit.substring(data.culprit.lastIndexOf('/'));
          }

          var stacktrace = data.stacktrace ||
            data.exception &&
            data.exception.values[0].stacktrace;

          if (stacktrace) {
            stacktrace.frames.forEach(function (frame) {
              frame.filename = frame.filename.substring(frame.filename.lastIndexOf('/'));
            });
          }
        }
      })
    .install();

[MaxBittker]

@moh3n9595 ^Raven.install instruments click events by default, which is probably causing some conflict here?
as a workaround you can turn click breadcrumbs off with this config option:

autoBreadcrumbs: {
    'dom': false
}

otherwise, you may want to reverse the order you call raven.install()
and include the materializecss click handlers

[SOSANA]

@ExoMemphiz by any chance do you have a repo I could check out on how you wired up the jquery with a react app? I am currently in the process of doing this and was curious the best approach to apply this as I thought this was a conflict with react apps as components are being rendered in the react virtual-dom vs actual dom so a little confused on how to approach applying this to a react app...

Also ripple/wave effects seem not to work besides the default and I think this related to me not requiring jquery and initilizing it but not 100% this is my problem just yet. I also posted a question regarding this on gitter.

anyone else can chime in and add their two cents that would be great @Dogfalo

[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
}

[itsHall]

I found that initializing waves on $(window).load(function(){}); would cause an issue but initializing on $(document).ready(function(){}); did not. I'm guessing the window is reloaded when the button is clicked due to the appending of the button's href to the web address.

[ermarkar]

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
}

Hi,

I am including materializecss like

import * as M from 'materialize-css/dist/js/materialize';

in every component and using it like

M.Modal.init(this.elementRef.nativeElement);

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

this makes difference? Can you please explain little more ?