fix(material/sort): animation not working correctly when activated on…

… focus (angular#21339) The sort header arrow animation wasn't working correctly when it was triggered as a result of a focus/blur.
annieyw · Dec 17, 2020 · 4efb44a · 4efb44a
1 parent 43081d9
commit 4efb44a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git 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
@@ -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;