From 32cd3f982d45df07e4a8deaa6a5b57587ef0b99f Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 12 Jul 2022 18:03:50 +0200 Subject: [PATCH] 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. (cherry picked from commit 9d92fbc12ea2fb1d0cd3656d034bb514c1a7f51e) --- src/material/tabs/ink-bar.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/material/tabs/ink-bar.ts b/src/material/tabs/ink-bar.ts index 84e7d3c1f7ea..e9bf38b0278c 100644 --- a/src/material/tabs/ink-bar.ts +++ b/src/material/tabs/ink-bar.ts @@ -66,11 +66,16 @@ export class MatInkBar { */ alignToElement(element: HTMLElement) { this.show(); - this._ngZone.onStable.pipe(take(1)).subscribe(() => { - const positions = this._inkBarPositioner(element); - const inkBar: HTMLElement = this._elementRef.nativeElement; - inkBar.style.left = positions.left; - inkBar.style.width = positions.width; + + // `onStable` might not run for a while if the zone has already stabilized. + // Wrap the call in `NgZone.run` to ensure that it runs relatively soon. + this._ngZone.run(() => { + this._ngZone.onStable.pipe(take(1)).subscribe(() => { + const positions = this._inkBarPositioner(element); + const inkBar = this._elementRef.nativeElement; + inkBar.style.left = positions.left; + inkBar.style.width = positions.width; + }); }); }