@angular/material 16.2.0-next.3 → 16.2.0-next.5

package/fesm2022/autocomplete.mjs

@@ -13,7 +13,7 @@ import * as i1 from '@angular/cdk/platform';
 import { _getEventTarget } from '@angular/cdk/platform';
 import { trigger, state, style, transition, group, animate } from '@angular/animations';
 import { Subscription, Subject, defer, merge, of, fromEvent } from 'rxjs';
-import { hasModifierKey, ESCAPE, ENTER, UP_ARROW, DOWN_ARROW, TAB } from '@angular/cdk/keycodes';
+import { ESCAPE, hasModifierKey, UP_ARROW, ENTER, DOWN_ARROW, TAB } from '@angular/cdk/keycodes';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i4 from '@angular/material/form-field';
@@ -69,6 +69,7 @@ function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY() {
         autoActiveFirstOption: false,
         autoSelectActiveOption: false,
         hideSingleSelectionIndicator: false,
+        requireSelection: false,
     };
 }
 /** Base class with all of the `MatAutocomplete` functionality. */
@@ -99,6 +100,18 @@ class _MatAutocompleteBase extends _MatAutocompleteMixinBase {
     set autoSelectActiveOption(value) {
         this._autoSelectActiveOption = coerceBooleanProperty(value);
     }
+    /**
+     * Whether the user is required to make a selection when they're interacting with the
+     * autocomplete. If the user moves away from the autcomplete without selecting an option from
+     * the list, the value will be reset. If the user opens the panel and closes it without
+     * interacting or selecting a value, the initial value will be kept.
+     */
+    get requireSelection() {
+        return this._requireSelection;
+    }
+    set requireSelection(value) {
+        this._requireSelection = coerceBooleanProperty(value);
+    }
     /**
      * Takes classes set on the host mat-autocomplete element and applies them to the panel
      * inside the overlay container to allow for easy styling.
@@ -146,6 +159,7 @@ class _MatAutocompleteBase extends _MatAutocompleteMixinBase {
         this.inertGroups = platform?.SAFARI || false;
         this._autoActiveFirstOption = !!_defaults.autoActiveFirstOption;
         this._autoSelectActiveOption = !!_defaults.autoSelectActiveOption;
+        this._requireSelection = !!_defaults.requireSelection;
     }
     ngAfterContentInit() {
         this._keyManager = new ActiveDescendantKeyManager(this.options)
@@ -210,7 +224,7 @@ class _MatAutocompleteBase extends _MatAutocompleteMixinBase {
         return option.disabled;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: _MatAutocompleteBase, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: _MatAutocompleteBase, inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], displayWith: "displayWith", autoActiveFirstOption: "autoActiveFirstOption", autoSelectActiveOption: "autoSelectActiveOption", panelWidth: "panelWidth", classList: ["class", "classList"] }, outputs: { optionSelected: "optionSelected", opened: "opened", closed: "closed", optionActivated: "optionActivated" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: _MatAutocompleteBase, inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], displayWith: "displayWith", autoActiveFirstOption: "autoActiveFirstOption", autoSelectActiveOption: "autoSelectActiveOption", requireSelection: "requireSelection", panelWidth: "panelWidth", classList: ["class", "classList"] }, outputs: { optionSelected: "optionSelected", opened: "opened", closed: "closed", optionActivated: "optionActivated" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: _MatAutocompleteBase, decorators: [{
             type: Directive
@@ -235,6 +249,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
                 type: Input
             }], autoSelectActiveOption: [{
                 type: Input
+            }], requireSelection: [{
+                type: Input
             }], panelWidth: [{
                 type: Input
             }], optionSelected: [{
@@ -254,6 +270,7 @@ class MatAutocomplete extends _MatAutocompleteBase {
         super(...arguments);
         this._visibleClass = 'mat-mdc-autocomplete-visible';
         this._hiddenClass = 'mat-mdc-autocomplete-hidden';
+        this._animationDone = new EventEmitter();
         this._hideSingleSelectionIndicator = this._defaults.hideSingleSelectionIndicator ?? false;
     }
     /** Whether checkmark indicator for single-selection options is hidden. */
@@ -272,6 +289,10 @@ class MatAutocomplete extends _MatAutocompleteBase {
             }
         }
     }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._animationDone.complete();
+    }
     // `skipPredicate` determines if key manager should avoid putting a given option in the tab
     // order. Allow disabled list items to receive focus via keyboard to align with WAI ARIA
     // recommendation.
@@ -290,14 +311,14 @@ class MatAutocomplete extends _MatAutocompleteBase {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatAutocomplete, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: MatAutocomplete, selector: "mat-autocomplete", inputs: { disableRipple: "disableRipple", hideSingleSelectionIndicator: "hideSingleSelectionIndicator" }, host: { attributes: { "ngSkipHydration": "" }, classAttribute: "mat-mdc-autocomplete" }, providers: [{ provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete }], queries: [{ propertyName: "optionGroups", predicate: MAT_OPTGROUP, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], exportAs: ["matAutocomplete"], usesInheritance: true, ngImport: i0, template: "<ng-template let-formFieldId=\"id\">\n  <div\n    class=\"mat-mdc-autocomplete-panel mdc-menu-surface mdc-menu-surface--open\"\n    role=\"listbox\"\n    [id]=\"id\"\n    [ngClass]=\"_classList\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n    [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n    #panel>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: ["div.mat-mdc-autocomplete-panel{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);width:100%;max-height:256px;visibility:hidden;transform-origin:center top;overflow:auto;padding:8px 0;border-radius:4px;box-sizing:border-box;position:static;background-color:var(--mat-autocomplete-background-color)}.cdk-high-contrast-active div.mat-mdc-autocomplete-panel{outline:solid 1px}.cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-top-left-radius:0;border-top-right-radius:0}.mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;transform-origin:center bottom}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{visibility:visible}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-hidden{visibility:hidden}mat-autocomplete{display:none}"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [panelAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: MatAutocomplete, selector: "mat-autocomplete", inputs: { disableRipple: "disableRipple", hideSingleSelectionIndicator: "hideSingleSelectionIndicator" }, host: { attributes: { "ngSkipHydration": "" }, classAttribute: "mat-mdc-autocomplete" }, providers: [{ provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete }], queries: [{ propertyName: "optionGroups", predicate: MAT_OPTGROUP, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], exportAs: ["matAutocomplete"], usesInheritance: true, ngImport: i0, template: "<ng-template let-formFieldId=\"id\">\n  <div\n    class=\"mat-mdc-autocomplete-panel mdc-menu-surface mdc-menu-surface--open\"\n    role=\"listbox\"\n    [id]=\"id\"\n    [ngClass]=\"_classList\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n    [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n    (@panelAnimation.done)=\"_animationDone.next($event)\"\n    #panel>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: ["div.mat-mdc-autocomplete-panel{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);width:100%;max-height:256px;visibility:hidden;transform-origin:center top;overflow:auto;padding:8px 0;border-radius:4px;box-sizing:border-box;position:static;background-color:var(--mat-autocomplete-background-color)}.cdk-high-contrast-active div.mat-mdc-autocomplete-panel{outline:solid 1px}.cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-top-left-radius:0;border-top-right-radius:0}.mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;transform-origin:center bottom}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{visibility:visible}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-hidden{visibility:hidden}mat-autocomplete{display:none}"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [panelAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatAutocomplete, decorators: [{
             type: Component,
             args: [{ selector: 'mat-autocomplete', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'matAutocomplete', inputs: ['disableRipple'], host: {
                         'class': 'mat-mdc-autocomplete',
                         'ngSkipHydration': '',
-                    }, providers: [{ provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete }], animations: [panelAnimation], template: "<ng-template let-formFieldId=\"id\">\n  <div\n    class=\"mat-mdc-autocomplete-panel mdc-menu-surface mdc-menu-surface--open\"\n    role=\"listbox\"\n    [id]=\"id\"\n    [ngClass]=\"_classList\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n    [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n    #panel>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: ["div.mat-mdc-autocomplete-panel{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);width:100%;max-height:256px;visibility:hidden;transform-origin:center top;overflow:auto;padding:8px 0;border-radius:4px;box-sizing:border-box;position:static;background-color:var(--mat-autocomplete-background-color)}.cdk-high-contrast-active div.mat-mdc-autocomplete-panel{outline:solid 1px}.cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-top-left-radius:0;border-top-right-radius:0}.mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;transform-origin:center bottom}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{visibility:visible}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-hidden{visibility:hidden}mat-autocomplete{display:none}"] }]
+                    }, providers: [{ provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete }], animations: [panelAnimation], template: "<ng-template let-formFieldId=\"id\">\n  <div\n    class=\"mat-mdc-autocomplete-panel mdc-menu-surface mdc-menu-surface--open\"\n    role=\"listbox\"\n    [id]=\"id\"\n    [ngClass]=\"_classList\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n    [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n    (@panelAnimation.done)=\"_animationDone.next($event)\"\n    #panel>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: ["div.mat-mdc-autocomplete-panel{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);width:100%;max-height:256px;visibility:hidden;transform-origin:center top;overflow:auto;padding:8px 0;border-radius:4px;box-sizing:border-box;position:static;background-color:var(--mat-autocomplete-background-color)}.cdk-high-contrast-active div.mat-mdc-autocomplete-panel{outline:solid 1px}.cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-top-left-radius:0;border-top-right-radius:0}.mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;transform-origin:center bottom}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{visibility:visible}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-hidden{visibility:hidden}mat-autocomplete{display:none}"] }]
         }], propDecorators: { optionGroups: [{
                 type: ContentChildren,
                 args: [MAT_OPTGROUP, { descendants: true }]
@@ -443,6 +464,26 @@ class _MatAutocompleteTriggerBase {
             // Return a stream that we'll replace with the real one once everything is in place.
             return this._zone.onStable.pipe(take(1), switchMap(() => this.optionSelections));
         });
+        /** Handles keyboard events coming from the overlay panel. */
+        this._handlePanelKeydown = (event) => {
+            // Close when pressing ESCAPE or ALT + UP_ARROW, based on the a11y guidelines.
+            // See: https://www.w3.org/TR/wai-aria-practices-1.1/#textbox-keyboard-interaction
+            if ((event.keyCode === ESCAPE && !hasModifierKey(event)) ||
+                (event.keyCode === UP_ARROW && hasModifierKey(event, 'altKey'))) {
+                // If the user had typed something in before we autoselected an option, and they decided
+                // to cancel the selection, restore the input value to the one they had typed in.
+                if (this._pendingAutoselectedOption) {
+                    this._updateNativeInputValue(this._valueBeforeAutoSelection ?? '');
+                    this._pendingAutoselectedOption = null;
+                }
+                this._closeKeyEventStream.next();
+                this._resetActiveItem();
+                // We need to stop propagation, otherwise the event will eventually
+                // reach the input itself and cause the overlay to be reopened.
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        };
         /**
          * Track which modal we have modified the `aria-owns` attribute of. When the combobox trigger is
          * inside an aria-modal, we apply aria-owns to the parent modal with the `id` of the options
@@ -506,6 +547,7 @@ class _MatAutocompleteTriggerBase {
             this._overlayRef.detach();
             this._closingActionsSubscription.unsubscribe();
         }
+        this._updatePanelState();
         // Note that in some cases this can end up being called after the component is destroyed.
         // Add a check to ensure that we don't try to run change detection on a destroyed view.
         if (!this._componentDestroyed) {
@@ -632,6 +674,9 @@ class _MatAutocompleteTriggerBase {
             this._previousValue = value;
             this._pendingAutoselectedOption = null;
             this._onChange(value);
+            if (!value) {
+                this._clearPreviousSelectedOption(null, false);
+            }
             if (this._canOpen() && this._document.activeElement === event.target) {
                 this.openPanel();
             }
@@ -700,7 +745,7 @@ class _MatAutocompleteTriggerBase {
             this._zone.run(() => {
                 const wasOpen = this.panelOpen;
                 this._resetActiveItem();
-                this.autocomplete._setVisibility();
+                this._updatePanelState();
                 this._changeDetectorRef.detectChanges();
                 if (this.panelOpen) {
                     this._overlayRef.updatePosition();
@@ -714,7 +759,7 @@ class _MatAutocompleteTriggerBase {
                     //   of the available options,
                     // - if a valid string is entered after an invalid one.
                     if (this.panelOpen) {
-                        this.autocomplete.opened.emit();
+                        this._emitOpened();
                     }
                     else {
                         this.autocomplete.closed.emit();
@@ -728,6 +773,14 @@ class _MatAutocompleteTriggerBase {
             // set the value, close the panel, and complete.
             .subscribe(event => this._setValueAndClose(event)));
     }
+    /**
+     * Emits the opened event once it's known that the panel will be shown and stores
+     * the state of the trigger right before the opening sequence was finished.
+     */
+    _emitOpened() {
+        this._valueOnOpen = this._element.nativeElement.value;
+        this.autocomplete.opened.emit();
+    }
     /** Destroys the autocomplete suggestion panel. */
     _destroyPanel() {
         if (this._overlayRef) {
@@ -761,23 +814,41 @@ class _MatAutocompleteTriggerBase {
      * stemmed from the user.
      */
     _setValueAndClose(event) {
+        const panel = this.autocomplete;
         const toSelect = event ? event.source : this._pendingAutoselectedOption;
         if (toSelect) {
             this._clearPreviousSelectedOption(toSelect);
             this._assignOptionValue(toSelect.value);
+            // TODO(crisbeto): this should wait until the animation is done, otherwise the value
+            // gets reset while the panel is still animating which looks glitchy. It'll likely break
+            // some tests to change it at this point.
             this._onChange(toSelect.value);
-            this.autocomplete._emitSelectEvent(toSelect);
+            panel._emitSelectEvent(toSelect);
             this._element.nativeElement.focus();
         }
+        else if (panel.requireSelection && this._element.nativeElement.value !== this._valueOnOpen) {
+            this._clearPreviousSelectedOption(null);
+            this._assignOptionValue(null);
+            // Wait for the animation to finish before clearing the form control value, otherwise
+            // the options might change while the animation is running which looks glitchy.
+            if (panel._animationDone) {
+                panel._animationDone.pipe(take(1)).subscribe(() => this._onChange(null));
+            }
+            else {
+                this._onChange(null);
+            }
+        }
         this.closePanel();
     }
     /**
      * Clear any previous selected option and emit a selection change event for this option
      */
-    _clearPreviousSelectedOption(skip) {
-        this.autocomplete.options.forEach(option => {
+    _clearPreviousSelectedOption(skip, emitEvent) {
+        // Null checks are necessary here, because the autocomplete
+        // or its options may not have been assigned yet.
+        this.autocomplete?.options?.forEach(option => {
             if (option !== skip && option.selected) {
-                option.deselect();
+                option.deselect(emitEvent);
             }
         });
     }
@@ -792,7 +863,6 @@ class _MatAutocompleteTriggerBase {
             });
             overlayRef = this._overlay.create(this._getOverlayConfig());
             this._overlayRef = overlayRef;
-            this._handleOverlayEvents(overlayRef);
             this._viewportSubscription = this._viewportRuler.change().subscribe(() => {
                 if (this.panelOpen && overlayRef) {
                     overlayRef.updateSize({ width: this._getPanelWidth() });
@@ -809,14 +879,40 @@ class _MatAutocompleteTriggerBase {
             this._closingActionsSubscription = this._subscribeToClosingActions();
         }
         const wasOpen = this.panelOpen;
-        this.autocomplete._setVisibility();
         this.autocomplete._isOpen = this._overlayAttached = true;
         this.autocomplete._setColor(this._formField?.color);
+        this._updatePanelState();
         this._applyModalPanelOwnership();
         // We need to do an extra `panelOpen` check in here, because the
         // autocomplete won't be shown if there are no options.
         if (this.panelOpen && wasOpen !== this.panelOpen) {
-            this.autocomplete.opened.emit();
+            this._emitOpened();
+        }
+    }
+    /** Updates the panel's visibility state and any trigger state tied to id. */
+    _updatePanelState() {
+        this.autocomplete._setVisibility();
+        // Note that here we subscribe and unsubscribe based on the panel's visiblity state,
+        // because the act of subscribing will prevent events from reaching other overlays and
+        // we don't want to block the events if there are no options.
+        if (this.panelOpen) {
+            const overlayRef = this._overlayRef;
+            if (!this._keydownSubscription) {
+                // Use the `keydownEvents` in order to take advantage of
+                // the overlay event targeting provided by the CDK overlay.
+                this._keydownSubscription = overlayRef.keydownEvents().subscribe(this._handlePanelKeydown);
+            }
+            if (!this._outsideClickSubscription) {
+                // Subscribe to the pointer events stream so that it doesn't get picked up by other overlays.
+                // TODO(crisbeto): we should switch `_getOutsideClickStream` eventually to use this stream,
+                // but the behvior isn't exactly the same and it ends up breaking some internal tests.
+                this._outsideClickSubscription = overlayRef.outsidePointerEvents().subscribe();
+            }
+        }
+        else {
+            this._keydownSubscription?.unsubscribe();
+            this._outsideClickSubscription?.unsubscribe();
+            this._keydownSubscription = this._outsideClickSubscription = null;
         }
     }
     _getOverlayConfig() {
@@ -941,34 +1037,6 @@ class _MatAutocompleteTriggerBase {
             }
         }
     }
-    /** Handles keyboard events coming from the overlay panel. */
-    _handleOverlayEvents(overlayRef) {
-        // Use the `keydownEvents` in order to take advantage of
-        // the overlay event targeting provided by the CDK overlay.
-        overlayRef.keydownEvents().subscribe(event => {
-            // Close when pressing ESCAPE or ALT + UP_ARROW, based on the a11y guidelines.
-            // See: https://www.w3.org/TR/wai-aria-practices-1.1/#textbox-keyboard-interaction
-            if ((event.keyCode === ESCAPE && !hasModifierKey(event)) ||
-                (event.keyCode === UP_ARROW && hasModifierKey(event, 'altKey'))) {
-                // If the user had typed something in before we autoselected an option, and they decided
-                // to cancel the selection, restore the input value to the one they had typed in.
-                if (this._pendingAutoselectedOption) {
-                    this._updateNativeInputValue(this._valueBeforeAutoSelection ?? '');
-                    this._pendingAutoselectedOption = null;
-                }
-                this._closeKeyEventStream.next();
-                this._resetActiveItem();
-                // We need to stop propagation, otherwise the event will eventually
-                // reach the input itself and cause the overlay to be reopened.
-                event.stopPropagation();
-                event.preventDefault();
-            }
-        });
-        // Subscribe to the pointer events stream so that it doesn't get picked up by other overlays.
-        // TODO(crisbeto): we should switch `_getOutsideClickStream` eventually to use this stream,
-        // but the behvior isn't exactly the same and it ends up breaking some internal tests.
-        overlayRef.outsidePointerEvents().subscribe();
-    }
     /**
      * If the autocomplete trigger is inside of an `aria-modal` element, connect
      * that modal to the options panel with `aria-owns`.