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

[pgg]

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?

No

[tylermassey]

I'm experiencing the same issue with <md-button>.

[Ifegwu]

I have been seeing this attitude in my codes
<button md-fab class="md-primary"></button>
I think <button></button> is the cause of this strange behavior. Kindly give me a feedback when this bug is fixed. Thanks in advance.

[Ifegwu]

When one replaces <button></button> with <md-button></md-button> the bug issue is resolved as seen in the code below:
<md-button md-fab class="md-primary" href="#"><i class="material-icons demo-toolbar-icon">settings</i></md-button>
But the material icon fails to centralize.

[lednhatkhanh]

This is exactly what happens to me right now.

[nikolasp]

@Ifegwu This is not a good solution because if you change button to md-button you can't use disabled attribute.

[vapits]

I have exactly the same thing:
Before click:

After click:

Simple code:

<ul>
  <li>
    <button md-mini-fab>
      <md-icon fontSet="fa" fontIcon="fa-arrow-left"></md-icon>
    </button>
  </li>
  <li>
    <button md-mini-fab>
      <md-icon fontSet="fa" fontIcon="fa-plus"></md-icon>
    </button>
  </li>
</ul>

If instead I use <md-button> instead of <button> it works without the issue.

[nikolasp]

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

[Ifegwu]

@nikolasp, this [disableRipple]="true" snippet did the miracle. Thanks a lot.

[ashleahhill]

@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

[jelbourn]

@tinayuangao can you check that this is an issue? I suspect that this is obsolete as of alpha.9

[turbohappy]

Adding a theme fixed it for me on alpha.9

[tinayuangao]

This is obsolete on current master.

[narkissbv]

Just updated to alpha.10 and it still happens when not using any themes.

update: It works for me when I specifically import the md-core() and all-theme. Still trying to get my head around this...

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}