diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts index e42dc8bd416b..8efe51205949 100644 --- a/src/lib/core/ripple/ripple.spec.ts +++ b/src/lib/core/ripple/ripple.spec.ts @@ -24,6 +24,7 @@ describe('MdRipple', () => { declarations: [ BasicRippleContainer, RippleContainerWithInputBindings, + RippleContainerWithoutBindings, RippleContainerWithNgIf, ], }); @@ -351,23 +352,38 @@ describe('MdRipple', () => { describe('global ripple options', () => { let rippleDirective: MdRipple; - function createTestComponent(rippleConfig: RippleGlobalOptions) { + function createTestComponent(rippleConfig: RippleGlobalOptions, + testComponent: any = BasicRippleContainer) { // Reset the previously configured testing module to be able set new providers. // The testing module has been initialized in the root describe group for the ripples. TestBed.resetTestingModule(); TestBed.configureTestingModule({ imports: [MdRippleModule], - declarations: [BasicRippleContainer], + declarations: [testComponent], providers: [{ provide: MD_RIPPLE_GLOBAL_OPTIONS, useValue: rippleConfig }] }); - fixture = TestBed.createComponent(BasicRippleContainer); + fixture = TestBed.createComponent(testComponent); fixture.detectChanges(); rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]'); rippleDirective = fixture.componentInstance.ripple; } + it('should work without having any binding set', () => { + createTestComponent({ disabled: true }, RippleContainerWithoutBindings); + + dispatchMouseEvent(rippleTarget, 'mousedown'); + dispatchMouseEvent(rippleTarget, 'mouseup'); + + expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0); + + dispatchMouseEvent(rippleTarget, 'mousedown'); + dispatchMouseEvent(rippleTarget, 'mouseup'); + + expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0); + }); + it('when disabled should not show any ripples on mousedown', () => { createTestComponent({ disabled: true }); @@ -577,6 +593,11 @@ class RippleContainerWithInputBindings { @ViewChild(MdRipple) ripple: MdRipple; } +@Component({ + template: `
`, +}) +class RippleContainerWithoutBindings {} + @Component({ template: `
` }) class RippleContainerWithNgIf { diff --git a/src/lib/core/ripple/ripple.ts b/src/lib/core/ripple/ripple.ts index 8e631006f72a..da22203360d4 100644 --- a/src/lib/core/ripple/ripple.ts +++ b/src/lib/core/ripple/ripple.ts @@ -87,6 +87,8 @@ export class MdRipple implements OnChanges, OnDestroy { ) { this._rippleRenderer = new RippleRenderer(elementRef, ngZone, ruler); this._globalOptions = globalOptions ? globalOptions : {}; + + this._updateRippleRenderer(); } ngOnChanges(changes: SimpleChanges) { @@ -94,8 +96,7 @@ export class MdRipple implements OnChanges, OnDestroy { this._rippleRenderer.setTriggerElement(this.trigger); } - this._rippleRenderer.rippleDisabled = this._globalOptions.disabled || this.disabled; - this._rippleRenderer.rippleConfig = this.rippleConfig; + this._updateRippleRenderer(); } ngOnDestroy() { @@ -122,4 +123,10 @@ export class MdRipple implements OnChanges, OnDestroy { color: this.color }; } + + /** Updates the ripple renderer with the latest ripple configuration. */ + private _updateRippleRenderer() { + this._rippleRenderer.rippleDisabled = this._globalOptions.disabled || this.disabled; + this._rippleRenderer.rippleConfig = this.rippleConfig; + } }