fix: tabindex inputs not supporting coercion (#20037)

crisbeto · wagnermaciel · commit ec5986c66776 · 2020-07-23T19:11:27.000-07:00
All the components that were implementing the `HasTabIndex` input weren't allowing coercion. Fixes #20026. (cherry picked from commit 333e609)
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": [

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`* found in the LICENSE file at https://angular.io/license`
`7`	`7`	`*/`
`8`	`8`
`9`		`-import {BooleanInput} from '@angular/cdk/coercion';`
	`9`	`+import {BooleanInput, NumberInput} from '@angular/cdk/coercion';`
`10`	`10`	`import {ChangeDetectorRef, Directive, ElementRef, InjectionToken, OnDestroy} from '@angular/core';`
`11`	`11`	`import {`
`12`	`12`	`CanDisable,`
`@@ -197,4 +197,5 @@ export class MatChipRemove extends _MatChipRemoveMixinBase implements CanDisable`
`197`	`197`	`}`
`198`	`198`
`199`	`199`	`static ngAcceptInputType_disabled: BooleanInput;`
	`200`	`+ static ngAcceptInputType_tabIndex: NumberInput;`
`200`	`201`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`*/`
`8`	`8`
`9`	`9`	`import {Directionality} from '@angular/cdk/bidi';`
`10`		`-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';`
	`10`	`+import {BooleanInput, coerceBooleanProperty, NumberInput} from '@angular/cdk/coercion';`
`11`	`11`	`import {`
`12`	`12`	`AfterContentInit,`
`13`	`13`	`AfterViewInit,`
`@@ -324,4 +324,5 @@ export class MatChipSet extends _MatChipSetMixinBase implements AfterContentInit`
`324`	`324`	`}`
`325`	`325`
`326`	`326`	`static ngAcceptInputType_disabled: BooleanInput;`
	`327`	`+ static ngAcceptInputType_tabIndex: NumberInput;`
`327`	`328`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1406,4 +1406,5 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,`
`1406`	`1406`	`static ngAcceptInputType_typeaheadDebounceInterval: NumberInput;`
`1407`	`1407`	`static ngAcceptInputType_disabled: BooleanInput;`
`1408`	`1408`	`static ngAcceptInputType_disableRipple: BooleanInput;`
	`1409`	`+ static ngAcceptInputType_tabIndex: NumberInput;`
`1409`	`1410`	`}`
Original file line number	Diff line number	Diff line change
`@@ -902,6 +902,7 @@ export class MatSlider extends _MatSliderMixinBase`
`902`	`902`	`static ngAcceptInputType_value: NumberInput;`
`903`	`903`	`static ngAcceptInputType_vertical: BooleanInput;`
`904`	`904`	`static ngAcceptInputType_disabled: BooleanInput;`
	`905`	`+ static ngAcceptInputType_tabIndex: NumberInput;`
`905`	`906`	`}`
`906`	`907`
`907`	`908`	`/** Returns whether an event is a touch event. */`