diff --git a/src/lib/core/ripple/ripple-renderer.ts b/src/lib/core/ripple/ripple-renderer.ts index f2f91d0efac3..ddb5e8c3716b 100644 --- a/src/lib/core/ripple/ripple-renderer.ts +++ b/src/lib/core/ripple/ripple-renderer.ts @@ -132,7 +132,9 @@ export class RippleRenderer { if (element) { // If the element is not null, register all event listeners on the trigger element. - this._triggerEvents.forEach((fn, type) => element.addEventListener(type, fn)); + this._ngZone.runOutsideAngular(() => { + this._triggerEvents.forEach((fn, type) => element.addEventListener(type, fn)); + }); } this._triggerElement = element; @@ -140,12 +142,10 @@ export class RippleRenderer { /** Listener being called on mousedown event. */ private onMousedown(event: MouseEvent) { - if (this.rippleDisabled) { - return; + if (!this.rippleDisabled) { + this._isMousedown = true; + this.fadeInRipple(event.pageX, event.pageY, this.rippleConfig); } - - this._isMousedown = true; - this.fadeInRipple(event.pageX, event.pageY, this.rippleConfig); } /** Listener being called on mouseup event. */ diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts index 531c982c7e12..2587dc745fad 100644 --- a/src/lib/core/ripple/ripple.spec.ts +++ b/src/lib/core/ripple/ripple.spec.ts @@ -167,6 +167,17 @@ describe('MdRipple', () => { expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0); }); + it('does not run events inside the NgZone', () => { + const spy = jasmine.createSpy('zone unstable callback'); + const subscription = fixture.ngZone.onUnstable.subscribe(spy); + + dispatchMouseEvent('mousedown'); + dispatchMouseEvent('mouseup'); + + expect(spy).not.toHaveBeenCalled(); + subscription.unsubscribe(); + }); + describe('when page is scrolled', () => { const startingWindowWidth = window.innerWidth; const startingWindowHeight = window.innerHeight; @@ -374,7 +385,7 @@ describe('MdRipple', () => { @Component({ template: ` -