From ceebb597e971c0ed151bbcb670f9bb48281dc8ea Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sun, 13 Dec 2020 12:25:51 +0100
Subject: [PATCH] fix(material/sort): animation not working correctly when
 activated on focus

The sort header arrow animation wasn't working correctly when it was triggered as a result of a focus/blur.
---
 src/material/sort/sort-header.ts          | 13 +++++++++----
 tools/public_api_guard/material/sort.d.ts |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/material/sort/sort-header.ts b/src/material/sort/sort-header.ts
index cb35d053cb08..8b2ab1ded297 100644
--- a/src/material/sort/sort-header.ts
+++ b/src/material/sort/sort-header.ts
@@ -141,7 +141,7 @@ export class MatSortHeader extends _MatSortHeaderMixinBase
   private _disableClear: boolean;
 
   constructor(public _intl: MatSortHeaderIntl,
-              changeDetectorRef: ChangeDetectorRef,
+              private _changeDetectorRef: ChangeDetectorRef,
               // `MatSort` is not optionally injected, but just asserted manually w/ better error.
               // tslint:disable-next-line: lightweight-tokens
               @Optional() public _sort: MatSort,
@@ -171,7 +171,7 @@ export class MatSortHeader extends _MatSortHeaderMixinBase
             this._setAnimationTransitionState({fromState: 'active', toState: this._arrowDirection});
           }
 
-          changeDetectorRef.markForCheck();
+          _changeDetectorRef.markForCheck();
         });
   }
 
@@ -191,8 +191,13 @@ export class MatSortHeader extends _MatSortHeaderMixinBase
   ngAfterViewInit() {
     // We use the focus monitor because we also want to style
     // things differently based on the focus origin.
-    this._focusMonitor.monitor(this._elementRef, true)
-        .subscribe(origin => this._setIndicatorHintVisible(!!origin));
+    this._focusMonitor.monitor(this._elementRef, true).subscribe(origin => {
+      const newState = !!origin;
+      if (newState !== this._showIndicatorHint) {
+        this._setIndicatorHintVisible(newState);
+        this._changeDetectorRef.markForCheck();
+      }
+    });
   }
 
   ngOnDestroy() {
diff --git a/tools/public_api_guard/material/sort.d.ts b/tools/public_api_guard/material/sort.d.ts
index afbdbcf24a3b..3b03b9609c42 100644
--- a/tools/public_api_guard/material/sort.d.ts
+++ b/tools/public_api_guard/material/sort.d.ts
@@ -64,7 +64,7 @@ export declare class MatSortHeader extends _MatSortHeaderMixinBase implements Ca
     set disableClear(v: boolean);
     id: string;
     start: 'asc' | 'desc';
-    constructor(_intl: MatSortHeaderIntl, changeDetectorRef: ChangeDetectorRef, _sort: MatSort, _columnDef: MatSortHeaderColumnDef, _focusMonitor: FocusMonitor, _elementRef: ElementRef<HTMLElement>);
+    constructor(_intl: MatSortHeaderIntl, _changeDetectorRef: ChangeDetectorRef, _sort: MatSort, _columnDef: MatSortHeaderColumnDef, _focusMonitor: FocusMonitor, _elementRef: ElementRef<HTMLElement>);
     _getAriaSortAttribute(): "none" | "ascending" | "descending";
     _getArrowDirectionState(): string;
     _getArrowViewState(): string;