From 76bf206234997b8ef3452e6b375307dec7055dad Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sat, 8 Mar 2025 10:01:28 +0100 Subject: [PATCH] fix(multiple): resolve directive host binding issues Fixes several issues that weren't caught, because of lack of type checking of directive host bindings. --- .../autocomplete/autocomplete-trigger.ts | 5 ++-- src/material/chips/chip-input.ts | 2 +- .../datepicker/date-range-input-parts.ts | 24 ++++++++----------- .../datepicker/datepicker-input-base.ts | 3 ++- src/material/datepicker/datepicker-input.ts | 2 +- src/material/menu/menu-trigger.ts | 2 +- src/material/timepicker/timepicker-input.ts | 5 ++-- .../public_api_guard/material/autocomplete.md | 4 ++-- tools/public_api_guard/material/chips.md | 2 ++ tools/public_api_guard/material/timepicker.md | 2 +- 10 files changed, 26 insertions(+), 25 deletions(-) diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts index d9334f84c499..951ba952c3e6 100644 --- a/src/material/autocomplete/autocomplete-trigger.ts +++ b/src/material/autocomplete/autocomplete-trigger.ts @@ -458,7 +458,8 @@ export class MatAutocompleteTrigger this._element.nativeElement.disabled = isDisabled; } - _handleKeydown(event: KeyboardEvent): void { + _handleKeydown(e: Event): void { + const event = e as KeyboardEvent; const keyCode = event.keyCode; const hasModifier = hasModifierKey(event); @@ -501,7 +502,7 @@ export class MatAutocompleteTrigger } } - _handleInput(event: KeyboardEvent): void { + _handleInput(event: Event): void { let target = event.target as HTMLInputElement; let value: number | string | null = target.value; diff --git a/src/material/chips/chip-input.ts b/src/material/chips/chip-input.ts index 6c6c68be4063..7be51abefbac 100644 --- a/src/material/chips/chip-input.ts +++ b/src/material/chips/chip-input.ts @@ -81,7 +81,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { this._chipGrid.registerInput(this); } } - private _chipGrid: MatChipGrid; + protected _chipGrid: MatChipGrid; /** * Whether or not the chipEnd event will be emitted when the input is blurred. diff --git a/src/material/datepicker/date-range-input-parts.ts b/src/material/datepicker/date-range-input-parts.ts index 946d8b6ea1c0..c1fa43d499d9 100644 --- a/src/material/datepicker/date-range-input-parts.ts +++ b/src/material/datepicker/date-range-input-parts.ts @@ -150,8 +150,8 @@ abstract class MatDateRangeInputPartBase } /** Handles `input` events on the input element. */ - override _onInput(value: string) { - super._onInput(value); + override _onInput(event: Event) { + super._onInput(event); this._rangeInput._handleChildValueChange(); } @@ -211,15 +211,13 @@ abstract class MatDateRangeInputPartBase host: { 'class': 'mat-start-date mat-date-range-input-inner', '[disabled]': 'disabled', - '(input)': '_onInput($event.target.value)', + '(input)': '_onInput($event)', '(change)': '_onChange()', '(keydown)': '_onKeydown($event)', '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null', - '[attr.aria-owns]': `_rangeInput._ariaOwns - ? _rangeInput._ariaOwns() - : (_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null`, - '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null', - '[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null', + '[attr.aria-owns]': '_rangeInput._ariaOwns() || null', + '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()!) : null', + '[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()!) : null', '(blur)': '_onBlur()', 'type': 'text', }, @@ -301,15 +299,13 @@ export class MatStartDate extends MatDateRangeInputPartBase { host: { 'class': 'mat-end-date mat-date-range-input-inner', '[disabled]': 'disabled', - '(input)': '_onInput($event.target.value)', + '(input)': '_onInput($event)', '(change)': '_onChange()', '(keydown)': '_onKeydown($event)', '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null', - '[attr.aria-owns]': `_rangeInput._ariaOwns - ? _rangeInput._ariaOwns() - : (_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null`, - '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null', - '[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null', + '[attr.aria-owns]': '_rangeInput._ariaOwns() || null', + '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()!) : null', + '[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()!) : null', '(blur)': '_onBlur()', 'type': 'text', }, diff --git a/src/material/datepicker/datepicker-input-base.ts b/src/material/datepicker/datepicker-input-base.ts index 268479a8133b..9349d51159f5 100644 --- a/src/material/datepicker/datepicker-input-base.ts +++ b/src/material/datepicker/datepicker-input-base.ts @@ -322,7 +322,8 @@ export abstract class MatDatepickerInputBase(); 'class': 'mat-mdc-menu-trigger', '[attr.aria-haspopup]': 'menu ? "menu" : null', '[attr.aria-expanded]': 'menuOpen', - '[attr.aria-controls]': 'menuOpen ? menu.panelId : null', + '[attr.aria-controls]': 'menuOpen ? menu?.panelId : null', '(click)': '_handleClick($event)', '(mousedown)': '_handleMousedown($event)', '(keydown)': '_handleKeydown($event)', diff --git a/src/material/timepicker/timepicker-input.ts b/src/material/timepicker/timepicker-input.ts index 2319299120c9..6d090a2ad01f 100644 --- a/src/material/timepicker/timepicker-input.ts +++ b/src/material/timepicker/timepicker-input.ts @@ -60,7 +60,7 @@ import {DOCUMENT} from '@angular/common'; '[attr.mat-timepicker-id]': 'timepicker()?.panelId', '[disabled]': 'disabled()', '(blur)': '_handleBlur()', - '(input)': '_handleInput($event.target.value)', + '(input)': '_handleInput($event)', '(keydown)': '_handleKeydown($event)', }, providers: [ @@ -261,7 +261,8 @@ export class MatTimepickerInput implements ControlValueAccessor, Validator, O }; /** Handles the `input` event. */ - protected _handleInput(value: string) { + protected _handleInput(event: Event) { + const value = (event.target as HTMLInputElement).value; const currentValue = this.value(); const date = this._dateAdapter.parseTime(value, this._dateFormats.parse.timeInput); const hasChanged = !this._dateAdapter.sameTime(date, currentValue); diff --git a/tools/public_api_guard/material/autocomplete.md b/tools/public_api_guard/material/autocomplete.md index a893df244e7a..c2560dedfe9b 100644 --- a/tools/public_api_guard/material/autocomplete.md +++ b/tools/public_api_guard/material/autocomplete.md @@ -178,9 +178,9 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn // (undocumented) _handleFocus(): void; // (undocumented) - _handleInput(event: KeyboardEvent): void; + _handleInput(event: Event): void; // (undocumented) - _handleKeydown(event: KeyboardEvent): void; + _handleKeydown(e: Event): void; // (undocumented) static ngAcceptInputType_autocompleteDisabled: unknown; // (undocumented) diff --git a/tools/public_api_guard/material/chips.md b/tools/public_api_guard/material/chips.md index add6d0721e5a..7cbccee7cdff 100644 --- a/tools/public_api_guard/material/chips.md +++ b/tools/public_api_guard/material/chips.md @@ -245,6 +245,8 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { readonly chipEnd: EventEmitter; get chipGrid(): MatChipGrid; set chipGrid(value: MatChipGrid); + // (undocumented) + protected _chipGrid: MatChipGrid; clear(): void; get disabled(): boolean; set disabled(value: boolean); diff --git a/tools/public_api_guard/material/timepicker.md b/tools/public_api_guard/material/timepicker.md index be4b213cee8a..6357d8e23de2 100644 --- a/tools/public_api_guard/material/timepicker.md +++ b/tools/public_api_guard/material/timepicker.md @@ -84,7 +84,7 @@ export class MatTimepickerInput implements ControlValueAccessor, Validator, O _getLabelId(): string | null; getOverlayOrigin(): ElementRef; protected _handleBlur(): void; - protected _handleInput(value: string): void; + protected _handleInput(event: Event): void; protected _handleKeydown(event: KeyboardEvent): void; readonly max: InputSignalWithTransform; readonly min: InputSignalWithTransform;