Skip to content

Commit

Permalink
fix(material/tabs): ink bar not shown in some cases (#25218)
Browse files Browse the repository at this point in the history
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 9d92fbc)
  • Loading branch information
crisbeto committed Jul 12, 2022
1 parent 40d34eb commit 76c0e9c
Showing 1 changed file with 10 additions and 5 deletions.
15 changes: 10 additions & 5 deletions src/material/tabs/ink-bar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
});
});
}

Expand Down

0 comments on commit 76c0e9c

Please sign in to comment.