Skip to content

Commit 9d92fbc

Browse files
authored
fix(material/tabs): ink bar not shown in some cases (#25218)
In #24000 the ink bar was switched from `requestAnimationFrame` to `NgZone.onStable` in order to avoids timeouts when the browser is in the background. The problem is that if the zone is already stable, it may take some user interaction before it becomes unstable again and emits to `onStable`. These changes wrap the call in `NgZone.run` to guarantee that it'll be unstable. Fixes #25117.
1 parent c28bbde commit 9d92fbc

File tree

1 file changed

+10
-5
lines changed

1 file changed

+10
-5
lines changed

src/material/tabs/ink-bar.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,16 @@ export class MatInkBar {
6666
*/
6767
alignToElement(element: HTMLElement) {
6868
this.show();
69-
this._ngZone.onStable.pipe(take(1)).subscribe(() => {
70-
const positions = this._inkBarPositioner(element);
71-
const inkBar: HTMLElement = this._elementRef.nativeElement;
72-
inkBar.style.left = positions.left;
73-
inkBar.style.width = positions.width;
69+
70+
// `onStable` might not run for a while if the zone has already stabilized.
71+
// Wrap the call in `NgZone.run` to ensure that it runs relatively soon.
72+
this._ngZone.run(() => {
73+
this._ngZone.onStable.pipe(take(1)).subscribe(() => {
74+
const positions = this._inkBarPositioner(element);
75+
const inkBar = this._elementRef.nativeElement;
76+
inkBar.style.left = positions.left;
77+
inkBar.style.width = positions.width;
78+
});
7479
});
7580
}
7681

0 commit comments

Comments
 (0)