From e16b902497899c3686f9450c5c0a8feb579fef54 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sat, 18 Jul 2020 15:04:22 +0200 Subject: [PATCH] fix: tabindex inputs not supporting coercion All the components that were implementing the `HasTabIndex` input weren't allowing coercion. Fixes #20026. --- src/material-experimental/mdc-chips/chip-icons.ts | 3 ++- src/material-experimental/mdc-chips/chip-set.ts | 3 ++- src/material-experimental/mdc-chips/chip.ts | 3 ++- src/material/checkbox/checkbox.ts | 3 ++- src/material/chips/chip.ts | 3 ++- src/material/core/common-behaviors/tabindex.ts | 3 ++- src/material/radio/radio.ts | 3 ++- src/material/select/select.ts | 1 + src/material/slide-toggle/slide-toggle.ts | 3 ++- src/material/slider/slider.ts | 1 + src/material/tabs/tab-nav-bar/tab-nav-bar.ts | 3 ++- src/material/tree/node.ts | 3 ++- tools/public_api_guard/material/checkbox.d.ts | 1 + tools/public_api_guard/material/chips.d.ts | 1 + tools/public_api_guard/material/radio.d.ts | 1 + tools/public_api_guard/material/select.d.ts | 1 + tools/public_api_guard/material/slide-toggle.d.ts | 1 + tools/public_api_guard/material/slider.d.ts | 1 + tools/public_api_guard/material/tabs.d.ts | 1 + tools/public_api_guard/material/tree.d.ts | 1 + tslint.json | 3 ++- 21 files changed, 32 insertions(+), 11 deletions(-) diff --git a/src/material-experimental/mdc-chips/chip-icons.ts b/src/material-experimental/mdc-chips/chip-icons.ts index 6788bb0b3c90..e6d060140784 100644 --- 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 index 8436fedad638..5be83dc70c10 100644 --- 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 index cbbdc88d1e5a..943e797f2824 100644 --- 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 index ec1b3071a2e1..95d20fc2ff67 100644 --- 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 index 65e486c439d7..e0ee00119143 100644 --- 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 index 264394eda0ab..d4f554354af1 100644 --- 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>(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 index 822628d2d582..c54097c17128 100644 --- 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 index 038dd634564c..35a7d3bc4115 100644 --- 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 index 411856abd1b5..85ab7388ef06 100644 --- 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 index b4c19ba31e7d..a1ad46774a6a 100644 --- 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 index 90d4cf05ba97..81bba59a3f1e 100644 --- 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 index 4e99138411d5..06e689dff7d7 100644 --- 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 extends _MatTreeNodeMixinBase } 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 index 4eddf1d579a7..a686cbe73db3 100644 --- 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; static ɵfac: i0.ɵɵFactoryDef; } diff --git a/tools/public_api_guard/material/chips.d.ts b/tools/public_api_guard/material/chips.d.ts index 1ac0c6d338a8..3c3cf8131138 100644 --- 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; static ɵfac: i0.ɵɵFactoryDef; } diff --git a/tools/public_api_guard/material/radio.d.ts b/tools/public_api_guard/material/radio.d.ts index 711056836582..7991178bb8b2 100644 --- 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 index c160adfa62a5..87a02f4c9fc8 100644 --- 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; static ɵfac: i0.ɵɵFactoryDef; diff --git a/tools/public_api_guard/material/slide-toggle.d.ts b/tools/public_api_guard/material/slide-toggle.d.ts index 769de17a2e48..96b7b94bb65c 100644 --- 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; static ɵfac: i0.ɵɵFactoryDef; } diff --git a/tools/public_api_guard/material/slider.d.ts b/tools/public_api_guard/material/slider.d.ts index 09e084876d75..8a88dea982a5 100644 --- 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 index b86db06e0898..65590ac32084 100644 --- 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 index 255d99997c97..c28c29e78336 100644 --- 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 extends _MatTreeNodeMixinBase implements role: 'treeitem' | 'group'; constructor(_elementRef: ElementRef, _tree: CdkTree, tabIndex: string); static ngAcceptInputType_disabled: BooleanInput; + static ngAcceptInputType_tabIndex: NumberInput; static ɵdir: i0.ɵɵDirectiveDefWithMeta, "mat-tree-node", ["matTreeNode"], { "disabled": "disabled"; "tabIndex": "tabIndex"; "role": "role"; }, {}, never>; static ɵfac: i0.ɵɵFactoryDef, [null, null, { attribute: "tabindex"; }]>; } diff --git a/tslint.json b/tslint.json index 3b15ba2e7021..5728d1ade702 100644 --- 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": [