fix: tabindex inputs not supporting coercion (#20037)

All the components that were implementing the `HasTabIndex` input weren't allowing coercion. Fixes #20026. (cherry picked from commit 333e609)
angular · Jul 24, 2020 · ec5986c · ec5986c
1 parent 16e8376
commit ec5986c
Show file tree

Hide file tree

Showing 21 changed files with 32 additions and 11 deletions.
diff --git a/src/material-experimental/mdc-chips/chip-icons.ts b/src/material-experimental/mdc-chips/chip-icons.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {BooleanInput} from '@angular/cdk/coercion';
+import {BooleanInput, NumberInput} from '@angular/cdk/coercion';
 import {ChangeDetectorRef, Directive, ElementRef, InjectionToken, OnDestroy} from '@angular/core';
 import {
   CanDisable,
@@ -197,4 +197,5 @@ export class MatChipRemove extends _MatChipRemoveMixinBase implements CanDisable
   }
 
   static ngAcceptInputType_disabled: BooleanInput;
+  static ngAcceptInputType_tabIndex: NumberInput;
 }
diff --git a/src/material-experimental/mdc-chips/chip-set.ts b/src/material-experimental/mdc-chips/chip-set.ts
@@ -7,7 +7,7 @@
  */
 
 import {Directionality} from '@angular/cdk/bidi';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {BooleanInput, coerceBooleanProperty, NumberInput} from '@angular/cdk/coercion';
 import {
   AfterContentInit,
   AfterViewInit,
@@ -324,4 +324,5 @@ export class MatChipSet extends _MatChipSetMixinBase implements AfterContentInit
   }
 
   static ngAcceptInputType_disabled: BooleanInput;
+  static ngAcceptInputType_tabIndex: NumberInput;
 }
diff --git a/src/material-experimental/mdc-chips/chip.ts b/src/material-experimental/mdc-chips/chip.ts
@@ -7,7 +7,7 @@
  */
 
 import {Directionality} from '@angular/cdk/bidi';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {BooleanInput, coerceBooleanProperty, NumberInput} from '@angular/cdk/coercion';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {
   AfterContentInit,
@@ -489,4 +489,5 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
   static ngAcceptInputType_removable: BooleanInput;
   static ngAcceptInputType_highlighted: BooleanInput;
   static ngAcceptInputType_disableRipple: BooleanInput;
+  static ngAcceptInputType_tabIndex: NumberInput;
 }
diff --git a/src/material/checkbox/checkbox.ts b/src/material/checkbox/checkbox.ts
@@ -7,7 +7,7 @@
  */
 
 import {FocusableOption, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {BooleanInput, coerceBooleanProperty, NumberInput} from '@angular/cdk/coercion';
 import {
   AfterViewChecked,
   Attribute,
@@ -504,4 +504,5 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
   static ngAcceptInputType_required: BooleanInput;
   static ngAcceptInputType_disableRipple: BooleanInput;
   static ngAcceptInputType_indeterminate: BooleanInput;
+  static ngAcceptInputType_tabIndex: NumberInput;
 }
diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts
@@ -7,7 +7,7 @@
  */
 
 import {FocusableOption} from '@angular/cdk/a11y';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {BooleanInput, coerceBooleanProperty, NumberInput} from '@angular/cdk/coercion';
 import {BACKSPACE, DELETE, SPACE} from '@angular/cdk/keycodes';
 import {Platform} from '@angular/cdk/platform';
 import {DOCUMENT} from '@angular/common';
@@ -454,6 +454,7 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
   static ngAcceptInputType_removable: BooleanInput;
   static ngAcceptInputType_disabled: BooleanInput;
   static ngAcceptInputType_disableRipple: BooleanInput;
+  static ngAcceptInputType_tabIndex: NumberInput;
 }
 
 /**

diff --git a/src/material/core/common-behaviors/tabindex.ts b/src/material/core/common-behaviors/tabindex.ts
@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {coerceNumberProperty} from '@angular/cdk/coercion';
 import {Constructor} from './constructor';
 import {CanDisable} from './disabled';
 
@@ -28,7 +29,7 @@ export function mixinTabIndex<T extends Constructor<CanDisable>>(base: T, defaul
     get tabIndex(): number { return this.disabled ? -1 : this._tabIndex; }
     set tabIndex(value: number) {
       // If the specified tabIndex value is null or undefined, fall back to the default value.
-      this._tabIndex = value != null ? value : defaultTabIndex;
+      this._tabIndex = value != null ? coerceNumberProperty(value) : defaultTabIndex;
     }
 
     constructor(...args: any[]) {

diff --git a/src/material/radio/radio.ts b/src/material/radio/radio.ts
@@ -7,7 +7,7 @@
  */
 
 import {FocusMonitor} from '@angular/cdk/a11y';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {BooleanInput, coerceBooleanProperty, NumberInput} from '@angular/cdk/coercion';
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
 import {
   AfterContentInit,
@@ -599,6 +599,7 @@ export abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBase imple
   static ngAcceptInputType_disabled: BooleanInput;
   static ngAcceptInputType_required: BooleanInput;
   static ngAcceptInputType_disableRipple: BooleanInput;
+  static ngAcceptInputType_tabIndex: NumberInput;
 }
 
 

diff --git a/src/material/select/select.ts b/src/material/select/select.ts
@@ -1406,4 +1406,5 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   static ngAcceptInputType_typeaheadDebounceInterval: NumberInput;
   static ngAcceptInputType_disabled: BooleanInput;
   static ngAcceptInputType_disableRipple: BooleanInput;
+  static ngAcceptInputType_tabIndex: NumberInput;
 }
diff --git a/src/material/slide-toggle/slide-toggle.ts b/src/material/slide-toggle/slide-toggle.ts
@@ -7,7 +7,7 @@
  */
 
 import {FocusMonitor} from '@angular/cdk/a11y';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {BooleanInput, coerceBooleanProperty, NumberInput} from '@angular/cdk/coercion';
 import {
   AfterContentInit,
   Attribute,
@@ -285,4 +285,5 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
   static ngAcceptInputType_checked: BooleanInput;
   static ngAcceptInputType_disabled: BooleanInput;
   static ngAcceptInputType_disableRipple: BooleanInput;
+  static ngAcceptInputType_tabIndex: NumberInput;
 }
diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts
@@ -902,6 +902,7 @@ export class MatSlider extends _MatSliderMixinBase
   static ngAcceptInputType_value: NumberInput;
   static ngAcceptInputType_vertical: BooleanInput;
   static ngAcceptInputType_disabled: BooleanInput;
+  static ngAcceptInputType_tabIndex: NumberInput;
 }
 
 /** Returns whether an event is a touch event. */

diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -42,7 +42,7 @@ import {
   RippleTarget,
   ThemePalette,
 } from '@angular/material/core';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {BooleanInput, coerceBooleanProperty, NumberInput} from '@angular/cdk/coercion';
 import {FocusMonitor, FocusableOption} from '@angular/cdk/a11y';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {MatInkBar} from '../ink-bar';
@@ -253,6 +253,7 @@ export class _MatTabLinkBase extends _MatTabLinkMixinBase implements AfterViewIn
 
   static ngAcceptInputType_disabled: BooleanInput;
   static ngAcceptInputType_disableRipple: BooleanInput;
+  static ngAcceptInputType_tabIndex: NumberInput;
 }
 
 

diff --git a/src/material/tree/node.ts b/src/material/tree/node.ts
@@ -30,7 +30,7 @@ import {
   mixinDisabled,
   mixinTabIndex,
 } from '@angular/material/core';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {BooleanInput, coerceBooleanProperty, NumberInput} from '@angular/cdk/coercion';
 
 const _MatTreeNodeMixinBase: HasTabIndexCtor & CanDisableCtor & typeof CdkTreeNode =
     mixinTabIndex(mixinDisabled(CdkTreeNode));
@@ -63,6 +63,7 @@ export class MatTreeNode<T> extends _MatTreeNodeMixinBase<T>
   }
 
   static ngAcceptInputType_disabled: BooleanInput;
+  static ngAcceptInputType_tabIndex: NumberInput;
 }
 
 /**

diff --git a/tools/public_api_guard/material/checkbox.d.ts b/tools/public_api_guard/material/checkbox.d.ts
@@ -56,6 +56,7 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements Contro
     static ngAcceptInputType_disabled: BooleanInput;
     static ngAcceptInputType_indeterminate: BooleanInput;
     static ngAcceptInputType_required: BooleanInput;
+    static ngAcceptInputType_tabIndex: NumberInput;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "ariaDescribedby": "aria-describedby"; "id": "id"; "required": "required"; "labelPosition": "labelPosition"; "name": "name"; "value": "value"; "checked": "checked"; "disabled": "disabled"; "indeterminate": "indeterminate"; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*"]>;
     static ɵfac: i0.ɵɵFactoryDef<MatCheckbox, [null, null, null, null, { attribute: "tabindex"; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
 }

diff --git a/tools/public_api_guard/material/chips.d.ts b/tools/public_api_guard/material/chips.d.ts
@@ -56,6 +56,7 @@ export declare class MatChip extends _MatChipMixinBase implements FocusableOptio
     static ngAcceptInputType_removable: BooleanInput;
     static ngAcceptInputType_selectable: BooleanInput;
     static ngAcceptInputType_selected: BooleanInput;
+    static ngAcceptInputType_tabIndex: NumberInput;
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "color": "color"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "selected": "selected"; "value": "value"; "selectable": "selectable"; "disabled": "disabled"; "removable": "removable"; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon"]>;
     static ɵfac: i0.ɵɵFactoryDef<MatChip, [null, null, null, { optional: true; }, { optional: true; }, null, { attribute: "tabindex"; }, { optional: true; }]>;
 }

diff --git a/tools/public_api_guard/material/radio.d.ts b/tools/public_api_guard/material/radio.d.ts
@@ -36,6 +36,7 @@ export declare abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBa
     static ngAcceptInputType_disableRipple: BooleanInput;
     static ngAcceptInputType_disabled: BooleanInput;
     static ngAcceptInputType_required: BooleanInput;
+    static ngAcceptInputType_tabIndex: NumberInput;
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<_MatRadioButtonBase, never, never, { "id": "id"; "name": "name"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "ariaDescribedby": "aria-describedby"; "checked": "checked"; "value": "value"; "labelPosition": "labelPosition"; "disabled": "disabled"; "required": "required"; "color": "color"; }, { "change": "change"; }, never>;
     static ɵfac: i0.ɵɵFactoryDef<_MatRadioButtonBase, never>;
 }

diff --git a/tools/public_api_guard/material/select.d.ts b/tools/public_api_guard/material/select.d.ts
@@ -100,6 +100,7 @@ export declare class MatSelect extends _MatSelectMixinBase implements AfterConte
     static ngAcceptInputType_disabled: BooleanInput;
     static ngAcceptInputType_multiple: BooleanInput;
     static ngAcceptInputType_required: BooleanInput;
+    static ngAcceptInputType_tabIndex: NumberInput;
     static ngAcceptInputType_typeaheadDebounceInterval: NumberInput;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MatSelect, "mat-select", ["matSelect"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "panelClass": "panelClass"; "placeholder": "placeholder"; "required": "required"; "multiple": "multiple"; "disableOptionCentering": "disableOptionCentering"; "compareWith": "compareWith"; "value": "value"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "errorStateMatcher": "errorStateMatcher"; "typeaheadDebounceInterval": "typeaheadDebounceInterval"; "sortComparator": "sortComparator"; "id": "id"; }, { "openedChange": "openedChange"; "_openedStream": "opened"; "_closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["customTrigger", "options", "optionGroups"], ["mat-select-trigger", "*"]>;
     static ɵfac: i0.ɵɵFactoryDef<MatSelect, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, { attribute: "tabindex"; }, null, null, { optional: true; }]>;

diff --git a/tools/public_api_guard/material/slide-toggle.d.ts b/tools/public_api_guard/material/slide-toggle.d.ts
@@ -43,6 +43,7 @@ export declare class MatSlideToggle extends _MatSlideToggleMixinBase implements
     static ngAcceptInputType_disableRipple: BooleanInput;
     static ngAcceptInputType_disabled: BooleanInput;
     static ngAcceptInputType_required: BooleanInput;
+    static ngAcceptInputType_tabIndex: NumberInput;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; "name": "name"; "id": "id"; "labelPosition": "labelPosition"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "required": "required"; "checked": "checked"; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, ["*"]>;
     static ɵfac: i0.ɵɵFactoryDef<MatSlideToggle, [null, null, null, { attribute: "tabindex"; }, null, { optional: true; }]>;
 }

diff --git a/tools/public_api_guard/material/slider.d.ts b/tools/public_api_guard/material/slider.d.ts
@@ -66,6 +66,7 @@ export declare class MatSlider extends _MatSliderMixinBase implements ControlVal
     static ngAcceptInputType_max: NumberInput;
     static ngAcceptInputType_min: NumberInput;
     static ngAcceptInputType_step: NumberInput;
+    static ngAcceptInputType_tabIndex: NumberInput;
     static ngAcceptInputType_thumbLabel: BooleanInput;
     static ngAcceptInputType_tickInterval: NumberInput;
     static ngAcceptInputType_value: NumberInput;

diff --git a/tools/public_api_guard/material/tabs.d.ts b/tools/public_api_guard/material/tabs.d.ts
@@ -92,6 +92,7 @@ export declare class _MatTabLinkBase extends _MatTabLinkMixinBase implements Aft
     ngOnDestroy(): void;
     static ngAcceptInputType_disableRipple: BooleanInput;
     static ngAcceptInputType_disabled: BooleanInput;
+    static ngAcceptInputType_tabIndex: NumberInput;
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<_MatTabLinkBase, never, never, { "active": "active"; }, {}, never>;
     static ɵfac: i0.ɵɵFactoryDef<_MatTabLinkBase, [null, null, { optional: true; }, { attribute: "tabindex"; }, null, { optional: true; }]>;
 }

diff --git a/tools/public_api_guard/material/tree.d.ts b/tools/public_api_guard/material/tree.d.ts
@@ -63,6 +63,7 @@ export declare class MatTreeNode<T> extends _MatTreeNodeMixinBase<T> implements
     role: 'treeitem' | 'group';
     constructor(_elementRef: ElementRef<HTMLElement>, _tree: CdkTree<T>, tabIndex: string);
     static ngAcceptInputType_disabled: BooleanInput;
+    static ngAcceptInputType_tabIndex: NumberInput;
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatTreeNode<any>, "mat-tree-node", ["matTreeNode"], { "disabled": "disabled"; "tabIndex": "tabIndex"; "role": "role"; }, {}, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatTreeNode<any>, [null, null, { attribute: "tabindex"; }]>;
 }

diff --git a/tslint.json b/tslint.json
@@ -131,7 +131,8 @@
       ["coerceBooleanProperty", "coerceCssPixelValue", "coerceNumberProperty"],
       {
         "CanDisable": ["disabled"],
-        "CanDisableRipple": ["disableRipple"]
+        "CanDisableRipple": ["disableRipple"],
+        "HasTabIndex": ["tabIndex"]
       }
     ],
     "no-host-decorator-in-concrete": [