Skip to content

Commit 9a2c4d6

Browse files
devversionmmalerba
authored andcommitted
fix(ripple): global ripple configuration on init (#4238)
* Currently when no bindings are set on the `mdRipple` target, the `ngOnChanges` will not fire and the `globalRippleOptions` will be ignored forever. Fixes #4235
1 parent 2db3d61 commit 9a2c4d6

File tree

2 files changed

+33
-5
lines changed

2 files changed

+33
-5
lines changed

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

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ describe('MdRipple', () => {
2424
declarations: [
2525
BasicRippleContainer,
2626
RippleContainerWithInputBindings,
27+
RippleContainerWithoutBindings,
2728
RippleContainerWithNgIf,
2829
],
2930
});
@@ -351,23 +352,38 @@ describe('MdRipple', () => {
351352
describe('global ripple options', () => {
352353
let rippleDirective: MdRipple;
353354

354-
function createTestComponent(rippleConfig: RippleGlobalOptions) {
355+
function createTestComponent(rippleConfig: RippleGlobalOptions,
356+
testComponent: any = BasicRippleContainer) {
355357
// Reset the previously configured testing module to be able set new providers.
356358
// The testing module has been initialized in the root describe group for the ripples.
357359
TestBed.resetTestingModule();
358360
TestBed.configureTestingModule({
359361
imports: [MdRippleModule],
360-
declarations: [BasicRippleContainer],
362+
declarations: [testComponent],
361363
providers: [{ provide: MD_RIPPLE_GLOBAL_OPTIONS, useValue: rippleConfig }]
362364
});
363365

364-
fixture = TestBed.createComponent(BasicRippleContainer);
366+
fixture = TestBed.createComponent(testComponent);
365367
fixture.detectChanges();
366368

367369
rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]');
368370
rippleDirective = fixture.componentInstance.ripple;
369371
}
370372

373+
it('should work without having any binding set', () => {
374+
createTestComponent({ disabled: true }, RippleContainerWithoutBindings);
375+
376+
dispatchMouseEvent(rippleTarget, 'mousedown');
377+
dispatchMouseEvent(rippleTarget, 'mouseup');
378+
379+
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
380+
381+
dispatchMouseEvent(rippleTarget, 'mousedown');
382+
dispatchMouseEvent(rippleTarget, 'mouseup');
383+
384+
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
385+
});
386+
371387
it('when disabled should not show any ripples on mousedown', () => {
372388
createTestComponent({ disabled: true });
373389

@@ -577,6 +593,11 @@ class RippleContainerWithInputBindings {
577593
@ViewChild(MdRipple) ripple: MdRipple;
578594
}
579595

596+
@Component({
597+
template: `<div id="container" #ripple="mdRipple" mat-ripple></div>`,
598+
})
599+
class RippleContainerWithoutBindings {}
600+
580601
@Component({ template: `<div id="container" mat-ripple [mdRippleSpeedFactor]="0"
581602
*ngIf="!isDestroyed"></div>` })
582603
class RippleContainerWithNgIf {

src/lib/core/ripple/ripple.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,16 @@ export class MdRipple implements OnChanges, OnDestroy {
8787
) {
8888
this._rippleRenderer = new RippleRenderer(elementRef, ngZone, ruler);
8989
this._globalOptions = globalOptions ? globalOptions : {};
90+
91+
this._updateRippleRenderer();
9092
}
9193

9294
ngOnChanges(changes: SimpleChanges) {
9395
if (changes['trigger'] && this.trigger) {
9496
this._rippleRenderer.setTriggerElement(this.trigger);
9597
}
9698

97-
this._rippleRenderer.rippleDisabled = this._globalOptions.disabled || this.disabled;
98-
this._rippleRenderer.rippleConfig = this.rippleConfig;
99+
this._updateRippleRenderer();
99100
}
100101

101102
ngOnDestroy() {
@@ -122,4 +123,10 @@ export class MdRipple implements OnChanges, OnDestroy {
122123
color: this.color
123124
};
124125
}
126+
127+
/** Updates the ripple renderer with the latest ripple configuration. */
128+
private _updateRippleRenderer() {
129+
this._rippleRenderer.rippleDisabled = this._globalOptions.disabled || this.disabled;
130+
this._rippleRenderer.rippleConfig = this.rippleConfig;
131+
}
125132
}

0 commit comments

Comments
 (0)