Skip to content

Commit 908862e

Browse files
committed
Also remove the ripple when transition is ended
1 parent 710278d commit 908862e

File tree

3 files changed

+13
-2
lines changed

3 files changed

+13
-2
lines changed

src/lib/core/ripple/ripple-renderer.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,9 @@ export class RippleRenderer {
155155

156156
/** Removes a foreground ripple from the DOM after it has faded out. */
157157
removeRippleFromDom(ripple: Element) {
158-
ripple.parentElement.removeChild(ripple);
158+
if (ripple && ripple.parentElement) {
159+
ripple.parentElement.removeChild(ripple);
160+
}
159161
}
160162

161163
/** Fades in the ripple background. */

src/lib/core/ripple/ripple.spec.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {TestBed, ComponentFixture} from '@angular/core/testing';
1+
import {TestBed, ComponentFixture, fakeAsync, tick} from '@angular/core/testing';
22
import {Component, ViewChild} from '@angular/core';
33
import {MdRipple, MdRippleModule} from './ripple';
44

@@ -128,6 +128,14 @@ describe('MdRipple', () => {
128128
expect(rippleElement.querySelectorAll('.md-ripple-foreground').length).toBe(0);
129129
});
130130

131+
it('removes foreground ripples after timeout', fakeAsync(() => {
132+
rippleElement.click();
133+
expect(rippleElement.querySelectorAll('.md-ripple-foreground').length).toBe(1);
134+
135+
tick(100);
136+
expect(rippleElement.querySelectorAll('.md-ripple-foreground').length).toBe(0);
137+
}));
138+
131139
it('creates ripples when manually triggered', () => {
132140
const rippleComponent = fixture.debugElement.componentInstance.ripple;
133141
// start() should show the background, but no foreground ripple yet.

src/lib/core/ripple/ripple.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@ export class MdRipple implements OnInit, OnDestroy, OnChanges {
134134
ripple.state = ForegroundRippleState.FADING_OUT;
135135
break;
136136
case ForegroundRippleState.FADING_OUT:
137+
this._rippleRenderer.removeRippleFromDom(ripple.rippleElement);
137138
break;
138139
}
139140
}

0 commit comments

Comments
 (0)