Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

md-fab creates and leaves md-ripple-fade-in inner div on click event

See original GitHub issue

Bug, feature request, or proposal:

Bug

What is the expected behavior?

To not duplicate and leave the inner div

What is the current behavior?

Duplicates the md-ripple-fade-in inner div

What are the steps to reproduce?

Markup:

<button md-fab color="primary" (click)="smaller()">
    <md-icon>remove</md-icon>
  </button>

Run app, open button in chrome dev tools inspector, you should see something like this:

<div class="md-button-ripple md-button-ripple-round" md-ripple="" md-ripple-background-color="rgba(0, 0, 0, 0)" ng-reflect-trigger="[object HTMLButtonElement]" ng-reflect-color="rgba(255, 255, 255, 0.2)" ng-reflect-background-color="rgba(0, 0, 0, 0)">
  <div class="md-ripple-background"></div>
</div>

Click 4 times on button and you will see something like this:

<div class="md-button-ripple md-button-ripple-round" md-ripple="" md-ripple-background-color="rgba(0, 0, 0, 0)" ng-reflect-trigger="[object HTMLButtonElement]" ng-reflect-color="rgba(255, 255, 255, 0.2)" ng-reflect-background-color="rgba(0, 0, 0, 0)">
  <div class="md-ripple-background" style="background-color: rgba(0, 0, 0, 0);"></div>
  <div class="md-ripple-foreground md-ripple-fade-in" style="left: -11.3431px; top: -19.3431px; width: 90.6863px; height: 90.6863px; transition-duration: 0.1s; background-color: rgba(255, 255, 255, 0.2);"></div>
  <div class="md-ripple-foreground md-ripple-fade-in" style="left: -36.0088px; top: -12.0088px; width: 114.018px; height: 114.018px; transition-duration: 0.1s; background-color: rgba(255, 255, 255, 0.2);"></div>
  <div class="md-ripple-foreground md-ripple-fade-in" style="left: -34.4004px; top: -11.4004px; width: 112.801px; height: 112.801px; transition-duration: 0.1s; background-color: rgba(255, 255, 255, 0.2);"></div>
  <div class="md-ripple-foreground md-ripple-fade-in" style="left: -34.4004px; top: -11.4004px; width: 112.801px; height: 112.801px; transition-duration: 0.1s; background-color: rgba(255, 255, 255, 0.2);"></div>
</div>

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, browsers are affected?

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular2-material/button": "^2.0.0-alpha.7-2",
"@angular2-material/core": "^2.0.0-alpha.7-2",
"@angular2-material/icon": "^2.0.0-alpha.7-2",
"@angular2-material/progress-circle": "^2.0.0-alpha.7-2",
"@angular2-material/toolbar": "^2.0.0-alpha.7-2"
OSX, Chrome  52.0.2743.116 (64-bit)

Is there anything else we should know?

Issue Analytics

State:
Created 7 years ago
Reactions:13
Comments:14 (2 by maintainers)

Top GitHub Comments

4reactions

nikolaspcommented, Aug 30, 2016

Add temporary for button [disableRipple]=“true” and it will resolve issue. After the fix, you can remove this.

3reactions

ashleahhillcommented, Sep 1, 2016

@pgg Have you included the core styles? It’s not documented (yet), but it fixed my issue and I got to keep the ripple effect.

https://github.com/angular/material2/issues/1139

Top Results From Across the Web

Howto: div with onclick inside another ...

Event capturing and Event bubbling. In event bubbling, if you click on inside div, the inside div click event fired first and then...

Element: click event - Web APIs | MDN

An element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released...

HTML Button onclick – JavaScript Click Event Tutorial

In this tutorial, we are going to explore the two different ways of executing click events in JavaScript using two different methods.

onclick Event

Execute a JavaScript when a button is clicked: <button onclick="myFunction()">Click ... The onclick event occurs when the user clicks on an HTML element....

Bubbling and capturing

The bubbling principle is simple. When an event happens on an element, it first runs the handlers on it, then on its parent,...