Skip to content

Commit b3a9062

Browse files
authoredSep 3, 2024··
fix(multiple): ripples not showing up in some cases (#29672)
Fixes the following issues that prevented the ripples from showing up: * We weren't passing an injector into the `RippleRenderer` created by the `RippleLoader` which meant that it was never injecting the structural styles. * The checkbox and tabs ripple selectors weren't specific enough which meant that they would be overridden in some cases. We were handling this in other components, but for some reason these two were skipped. Fixes #29670.
1 parent 9333de0 commit b3a9062

File tree

3 files changed

+18
-4
lines changed

3 files changed

+18
-4
lines changed
 

‎src/material/checkbox/checkbox.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
}
6969
}
7070

71-
.mat-mdc-checkbox-ripple,
71+
.mat-mdc-checkbox .mat-mdc-checkbox-ripple,
7272
.mdc-checkbox__ripple {
7373
@include layout-common.fill();
7474

‎src/material/core/private/ripple-loader.ts

+16-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,14 @@
77
*/
88

99
import {DOCUMENT} from '@angular/common';
10-
import {ANIMATION_MODULE_TYPE, Injectable, NgZone, OnDestroy, inject} from '@angular/core';
10+
import {
11+
ANIMATION_MODULE_TYPE,
12+
Injectable,
13+
Injector,
14+
NgZone,
15+
OnDestroy,
16+
inject,
17+
} from '@angular/core';
1118
import {
1219
MAT_RIPPLE_GLOBAL_OPTIONS,
1320
RippleRenderer,
@@ -54,6 +61,7 @@ export class MatRippleLoader implements OnDestroy {
5461
private _globalRippleOptions = inject(MAT_RIPPLE_GLOBAL_OPTIONS, {optional: true});
5562
private _platform = inject(Platform);
5663
private _ngZone = inject(NgZone);
64+
private _injector = inject(Injector);
5765
private _hosts = new Map<
5866
HTMLElement,
5967
{renderer: RippleRenderer; target: RippleTarget; hasSetUpEvents: boolean}
@@ -184,7 +192,13 @@ export class MatRippleLoader implements OnDestroy {
184192
},
185193
};
186194

187-
const renderer = new RippleRenderer(target, this._ngZone, rippleEl, this._platform);
195+
const renderer = new RippleRenderer(
196+
target,
197+
this._ngZone,
198+
rippleEl,
199+
this._platform,
200+
this._injector,
201+
);
188202
const hasSetUpEvents = !target.rippleDisabled;
189203

190204
if (hasSetUpEvents) {

‎src/material/tabs/_tabs-common.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ $mat-tab-animation-duration: 500ms !default;
8383
}
8484
}
8585

86-
.mat-mdc-tab-ripple {
86+
.mat-mdc-tab-ripple.mat-mdc-tab-ripple {
8787
position: absolute;
8888
top: 0;
8989
left: 0;

0 commit comments

Comments
 (0)
Please sign in to comment.