fix(material/tabs): validate animation duration (#33452)

crisbeto · web-flow · commit 58a78073fd88 · 2026-06-27T09:07:44.000+02:00
Adds some logic to validate the animation duration for the data before assigning it to the DOM. Along the same lines as 0df0042.
diff --git a/goldens/material/tabs/index.api.md b/goldens/material/tabs/index.api.md
@@ -446,9 +446,7 @@ export class MatTabLink extends InkBarItem implements AfterViewInit, OnDestroy,
 // @public
 export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit, AfterViewInit {
     constructor();
-    // (undocumented)
-    get animationDuration(): string;
-    set animationDuration(value: string | number);
+    animationDuration: string;
     get backgroundColor(): ThemePalette;
     set backgroundColor(value: ThemePalette);
     color: ThemePalette;
@@ -472,6 +470,8 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit
     // (undocumented)
     _nextPaginator: ElementRef<HTMLElement>;
     // (undocumented)
+    static ngAcceptInputType_animationDuration: string | number;
+    // (undocumented)
     static ngAcceptInputType_disableRipple: unknown;
     // (undocumented)
     static ngAcceptInputType_fitInkBarToContent: unknown;
diff --git a/src/material/tabs/paginated-tab-header.ts b/src/material/tabs/paginated-tab-header.ts
@@ -63,6 +63,19 @@ const HEADER_SCROLL_INTERVAL = 100;
 /** Item inside a paginated tab header. */
 export type MatPaginatedTabHeaderItem = FocusableOption & {elementRef: ElementRef};
 
+/** Normalizes an animation duration value. */
+export function normalizeDuration(value: string | number): string {
+  const stringValue = value + '';
+
+  if (/^[0-9]+(?:\.[0-9]+)?$/.test(stringValue)) {
+    return `${value}ms`;
+  } else if (/^[0-9]+(?:\.[0-9]+)?(?:ms|s)$/.test(stringValue)) {
+    return stringValue;
+  } else {
+    return '';
+  }
+}
+
 /**
  * Base class for a tab header that supported pagination.
  * @docs-private
diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts
@@ -39,6 +39,7 @@ import {MatTabBody} from './tab-body';
 import {CdkPortalOutlet} from '@angular/cdk/portal';
 import {MatTabLabelWrapper} from './tab-label-wrapper';
 import {Platform} from '@angular/cdk/platform';
+import {normalizeDuration} from './paginated-tab-header';
 
 /** @docs-private */
 export interface MatTabGroupBaseHeader {
@@ -606,9 +607,3 @@ export class MatTabChangeEvent {
   /** Reference to the currently-selected tab. */
   tab!: MatTab;
 }
-
-/** Normalizes an animation duration value. */
-function normalizeDuration(value: string | number): string {
-  const stringValue = value + '';
-  return /^\d+$/.test(stringValue) ? value + 'ms' : stringValue;
-}
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -41,7 +41,11 @@ import {BehaviorSubject, Subject} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
 import {ENTER, SPACE} from '@angular/cdk/keycodes';
 import {MAT_TABS_CONFIG, MatTabsConfig} from '../tab-config';
-import {MatPaginatedTabHeader, MatPaginatedTabHeaderItem} from '../paginated-tab-header';
+import {
+  MatPaginatedTabHeader,
+  MatPaginatedTabHeaderItem,
+  normalizeDuration,
+} from '../paginated-tab-header';
 import {CdkObserveContent} from '@angular/cdk/observers';
 import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
@@ -89,17 +93,8 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit
   @Input({alias: 'mat-stretch-tabs', transform: booleanAttribute})
   stretchTabs: boolean = true;
 
-  @Input()
-  get animationDuration(): string {
-    return this._animationDuration;
-  }
-
-  set animationDuration(value: string | number) {
-    const stringValue = value + '';
-    this._animationDuration = /^\d+$/.test(stringValue) ? value + 'ms' : stringValue;
-  }
-
-  private _animationDuration!: string;
+  /** Duration for the header animation. Will be normalized to milliseconds if no units are set. */
+  @Input({transform: normalizeDuration}) animationDuration: string = '';
 
   /** Query list of all tab links of the tab navigation. */
   @ContentChildren(forwardRef(() => MatTabLink), {descendants: true})
