fix(multiple): resolve directive host binding issues (#30606)

Fixes several issues that weren't caught, because of lack of type checking of directive host bindings.

Author: crisbeto

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;
 

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.

src/material/datepicker/date-range-input-parts.ts

@@ -150,8 +150,8 @@ abstract class MatDateRangeInputPartBase<D>
   }
 
   /** 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<D>
   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<D> extends MatDateRangeInputPartBase<D> {
   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',
   },

src/material/datepicker/datepicker-input-base.ts

@@ -322,7 +322,8 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
     }
   }
 
-  _onInput(value: string) {
+  _onInput(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
     const lastValueWasValid = this._lastValueValid;
     let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
     this._lastValueValid = this._isValidValue(date);

src/material/datepicker/datepicker-input.ts

@@ -48,7 +48,7 @@ export const MAT_DATEPICKER_VALIDATORS: any = {
     // `aria-owns` for this, because it's only defined while the calendar is open.
     '[attr.data-mat-calendar]': '_datepicker ? _datepicker.id : null',
     '[disabled]': 'disabled',
-    '(input)': '_onInput($event.target.value)',
+    '(input)': '_onInput($event)',
     '(change)': '_onChange()',
     '(blur)': '_onBlur()',
     '(keydown)': '_onKeydown($event)',

src/material/menu/menu-trigger.ts

@@ -92,7 +92,7 @@ const PANELS_TO_TRIGGERS = new WeakMap<MatMenuPanel, MatMenuTrigger>();
     '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)',

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<D> 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);

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)

tools/public_api_guard/material/chips.md

@@ -245,6 +245,8 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
     readonly chipEnd: EventEmitter<MatChipInputEvent>;
     get chipGrid(): MatChipGrid;
     set chipGrid(value: MatChipGrid);
+    // (undocumented)
+    protected _chipGrid: MatChipGrid;
     clear(): void;
     get disabled(): boolean;
     set disabled(value: boolean);

tools/public_api_guard/material/timepicker.md

@@ -84,7 +84,7 @@ export class MatTimepickerInput<D> implements ControlValueAccessor, Validator, O
     _getLabelId(): string | null;
     getOverlayOrigin(): ElementRef<HTMLElement>;
     protected _handleBlur(): void;
-    protected _handleInput(value: string): void;
+    protected _handleInput(event: Event): void;
     protected _handleKeydown(event: KeyboardEvent): void;
     readonly max: InputSignalWithTransform<D | null, unknown>;
     readonly min: InputSignalWithTransform<D | null, unknown>;