@angular/material 14.0.0-next.0 → 14.0.0-next.11

package/fesm2015/autocomplete.mjs

@@ -12,7 +12,7 @@ import * as i1$1 from '@angular/cdk/overlay';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/scrolling';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { ESCAPE, hasModifierKey, ENTER, UP_ARROW, DOWN_ARROW, TAB } from '@angular/cdk/keycodes';
+import { hasModifierKey, ESCAPE, ENTER, UP_ARROW, 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';
@@ -54,7 +54,7 @@ const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS = new InjectionToken('mat-autocomplete-de
 });
 /** @docs-private */
 function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY() {
-    return { autoActiveFirstOption: false };
+    return { autoActiveFirstOption: false, autoSelectActiveOption: false };
 }
 /** Base class with all of the `MatAutocomplete` functionality. */
 class _MatAutocompleteBase extends _MatAutocompleteMixinBase {
@@ -85,6 +85,7 @@ class _MatAutocompleteBase extends _MatAutocompleteMixinBase {
         // option altogether.
         this.inertGroups = (platform === null || platform === void 0 ? void 0 : platform.SAFARI) || false;
         this._autoActiveFirstOption = !!defaults.autoActiveFirstOption;
+        this._autoSelectActiveOption = !!defaults.autoSelectActiveOption;
     }
     /** Whether the autocomplete panel is open. */
     get isOpen() {
@@ -100,6 +101,13 @@ class _MatAutocompleteBase extends _MatAutocompleteMixinBase {
     set autoActiveFirstOption(value) {
         this._autoActiveFirstOption = coerceBooleanProperty(value);
     }
+    /** Whether the active option should be selected as the user is navigating. */
+    get autoSelectActiveOption() {
+        return this._autoSelectActiveOption;
+    }
+    set autoSelectActiveOption(value) {
+        this._autoSelectActiveOption = 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.
@@ -168,9 +176,9 @@ class _MatAutocompleteBase extends _MatAutocompleteMixinBase {
         classList[this._hiddenClass] = !this.showPanel;
     }
 }
-_MatAutocompleteBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: _MatAutocompleteBase, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Directive });
-_MatAutocompleteBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: _MatAutocompleteBase, inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], displayWith: "displayWith", autoActiveFirstOption: "autoActiveFirstOption", 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: "13.2.0-rc.1", ngImport: i0, type: _MatAutocompleteBase, decorators: [{
+_MatAutocompleteBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: _MatAutocompleteBase, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Directive });
+_MatAutocompleteBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.13", 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: _MatAutocompleteBase, decorators: [{
             type: Directive
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
@@ -193,6 +201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ng
                 type: Input
             }], autoActiveFirstOption: [{
                 type: Input
+            }], autoSelectActiveOption: [{
+                type: Input
             }], panelWidth: [{
                 type: Input
             }], optionSelected: [{
@@ -214,13 +224,13 @@ class MatAutocomplete extends _MatAutocompleteBase {
         this._hiddenClass = 'mat-autocomplete-hidden';
     }
 }
-MatAutocomplete.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatAutocomplete, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatAutocomplete.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatAutocomplete, selector: "mat-autocomplete", inputs: { disableRipple: "disableRipple" }, host: { classAttribute: "mat-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 class=\"mat-autocomplete-panel\"\n       role=\"listbox\"\n       [id]=\"id\"\n       [attr.aria-label]=\"ariaLabel || null\"\n       [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n       [ngClass]=\"_classList\"\n       #panel>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".mat-autocomplete-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;visibility:hidden;max-width:none;max-height:256px;position:relative;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.mat-autocomplete-panel.mat-autocomplete-visible{visibility:visible}.mat-autocomplete-panel.mat-autocomplete-hidden{visibility:hidden}.mat-autocomplete-panel-above .mat-autocomplete-panel{border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}.mat-autocomplete-panel .mat-divider-horizontal{margin-top:-1px}.cdk-high-contrast-active .mat-autocomplete-panel{outline:solid 1px}mat-autocomplete{display:none}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatAutocomplete, decorators: [{
+MatAutocomplete.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: MatAutocomplete, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MatAutocomplete.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "14.0.0-next.13", type: MatAutocomplete, selector: "mat-autocomplete", inputs: { disableRipple: "disableRipple" }, host: { classAttribute: "mat-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 class=\"mat-autocomplete-panel\"\n       role=\"listbox\"\n       [id]=\"id\"\n       [attr.aria-label]=\"ariaLabel || null\"\n       [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n       [ngClass]=\"_classList\"\n       #panel>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".mat-autocomplete-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;visibility:hidden;max-width:none;max-height:256px;position:relative;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.mat-autocomplete-panel.mat-autocomplete-visible{visibility:visible}.mat-autocomplete-panel.mat-autocomplete-hidden{visibility:hidden}.mat-autocomplete-panel-above .mat-autocomplete-panel{border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}.mat-autocomplete-panel .mat-divider-horizontal{margin-top:-1px}.cdk-high-contrast-active .mat-autocomplete-panel{outline:solid 1px}mat-autocomplete{display:none}"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: MatAutocomplete, decorators: [{
             type: Component,
             args: [{ selector: 'mat-autocomplete', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'matAutocomplete', inputs: ['disableRipple'], host: {
                         'class': 'mat-autocomplete',
-                    }, providers: [{ provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete }], template: "<ng-template let-formFieldId=\"id\">\n  <div class=\"mat-autocomplete-panel\"\n       role=\"listbox\"\n       [id]=\"id\"\n       [attr.aria-label]=\"ariaLabel || null\"\n       [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n       [ngClass]=\"_classList\"\n       #panel>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".mat-autocomplete-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;visibility:hidden;max-width:none;max-height:256px;position:relative;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.mat-autocomplete-panel.mat-autocomplete-visible{visibility:visible}.mat-autocomplete-panel.mat-autocomplete-hidden{visibility:hidden}.mat-autocomplete-panel-above .mat-autocomplete-panel{border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}.mat-autocomplete-panel .mat-divider-horizontal{margin-top:-1px}.cdk-high-contrast-active .mat-autocomplete-panel{outline:solid 1px}mat-autocomplete{display:none}\n"] }]
+                    }, providers: [{ provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete }], template: "<ng-template let-formFieldId=\"id\">\n  <div class=\"mat-autocomplete-panel\"\n       role=\"listbox\"\n       [id]=\"id\"\n       [attr.aria-label]=\"ariaLabel || null\"\n       [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n       [ngClass]=\"_classList\"\n       #panel>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".mat-autocomplete-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;visibility:hidden;max-width:none;max-height:256px;position:relative;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.mat-autocomplete-panel.mat-autocomplete-visible{visibility:visible}.mat-autocomplete-panel.mat-autocomplete-hidden{visibility:hidden}.mat-autocomplete-panel-above .mat-autocomplete-panel{border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}.mat-autocomplete-panel .mat-divider-horizontal{margin-top:-1px}.cdk-high-contrast-active .mat-autocomplete-panel{outline:solid 1px}mat-autocomplete{display:none}"] }]
         }], propDecorators: { optionGroups: [{
                 type: ContentChildren,
                 args: [MAT_OPTGROUP, { descendants: true }]
@@ -381,6 +391,7 @@ class _MatAutocompleteTriggerBase {
             this.autocomplete.closed.emit();
         }
         this.autocomplete._isOpen = this._overlayAttached = false;
+        this._pendingAutoselectedOption = null;
         if (this._overlayRef && this._overlayRef.hasAttached()) {
             this._overlayRef.detach();
             this._closingActionsSubscription.unsubscribe();
@@ -432,6 +443,11 @@ class _MatAutocompleteTriggerBase {
             const customOrigin = this.connectedTo ? this.connectedTo.elementRef.nativeElement : null;
             return (this._overlayAttached &&
                 clickTarget !== this._element.nativeElement &&
+                // Normally focus moves inside `mousedown` so this condition will almost always be
+                // true. Its main purpose is to handle the case where the input is focused from an
+                // outside click which propagates up to the `body` listener within the same sequence
+                // and causes the panel to close immediately (see #3106).
+                this._document.activeElement !== this._element.nativeElement &&
                 (!formField || !formField.contains(clickTarget)) &&
                 (!customOrigin || !customOrigin.contains(clickTarget)) &&
                 !!this._overlayRef &&
@@ -440,7 +456,7 @@ class _MatAutocompleteTriggerBase {
     }
     // Implemented as part of ControlValueAccessor.
     writeValue(value) {
-        Promise.resolve().then(() => this._setTriggerValue(value));
+        Promise.resolve(null).then(() => this._assignOptionValue(value));
     }
     // Implemented as part of ControlValueAccessor.
     registerOnChange(fn) {
@@ -456,14 +472,15 @@ class _MatAutocompleteTriggerBase {
     }
     _handleKeydown(event) {
         const keyCode = event.keyCode;
+        const hasModifier = hasModifierKey(event);
         // Prevent the default action on all escape key presses. This is here primarily to bring IE
         // in line with other browsers. By default, pressing escape on IE will cause it to revert
         // the input value to the one that it had on focus, however it won't dispatch any events
         // which means that the model value will be out of sync with the view.
-        if (keyCode === ESCAPE && !hasModifierKey(event)) {
+        if (keyCode === ESCAPE && !hasModifier) {
             event.preventDefault();
         }
-        if (this.activeOption && keyCode === ENTER && this.panelOpen && !hasModifierKey(event)) {
+        if (this.activeOption && keyCode === ENTER && this.panelOpen && !hasModifier) {
             this.activeOption._selectViaInteraction();
             this._resetActiveItem();
             event.preventDefault();
@@ -471,7 +488,7 @@ class _MatAutocompleteTriggerBase {
         else if (this.autocomplete) {
             const prevActiveItem = this.autocomplete._keyManager.activeItem;
             const isArrowKey = keyCode === UP_ARROW || keyCode === DOWN_ARROW;
-            if (this.panelOpen || keyCode === TAB) {
+            if (keyCode === TAB || (isArrowKey && !hasModifier && this.panelOpen)) {
                 this.autocomplete._keyManager.onKeydown(event);
             }
             else if (isArrowKey && this._canOpen()) {
@@ -479,6 +496,13 @@ class _MatAutocompleteTriggerBase {
             }
             if (isArrowKey || this.autocomplete._keyManager.activeItem !== prevActiveItem) {
                 this._scrollToOption(this.autocomplete._keyManager.activeItemIndex || 0);
+                if (this.autocomplete.autoSelectActiveOption && this.activeOption) {
+                    if (!this._pendingAutoselectedOption) {
+                        this._valueBeforeAutoSelection = this._element.nativeElement.value;
+                    }
+                    this._pendingAutoselectedOption = this.activeOption;
+                    this._assignOptionValue(this.activeOption.value);
+                }
             }
         }
     }
@@ -496,6 +520,7 @@ class _MatAutocompleteTriggerBase {
         // See: https://connect.microsoft.com/IE/feedback/details/885747/
         if (this._previousValue !== value) {
             this._previousValue = value;
+            this._pendingAutoselectedOption = null;
             this._onChange(value);
             if (this._canOpen() && this._document.activeElement === event.target) {
                 this.openPanel();
@@ -512,6 +537,11 @@ class _MatAutocompleteTriggerBase {
             this._floatLabel(true);
         }
     }
+    _handleClick() {
+        if (this._canOpen() && !this.panelOpen) {
+            this.openPanel();
+        }
+    }
     /**
      * In "auto" mode, the label will animate down as soon as focus is lost.
      * This causes the value to jump when selecting an option with the mouse.
@@ -552,19 +582,33 @@ class _MatAutocompleteTriggerBase {
         // create a new stream of panelClosingActions, replacing any previous streams
         // that were created, and flatten it so our stream only emits closing events...
         switchMap(() => {
-            const wasOpen = this.panelOpen;
-            this._resetActiveItem();
-            this.autocomplete._setVisibility();
-            if (this.panelOpen) {
-                this._overlayRef.updatePosition();
-                // If the `panelOpen` state changed, we need to make sure to emit the `opened`
-                // event, because we may not have emitted it when the panel was attached. This
-                // can happen if the users opens the panel and there are no options, but the
-                // options come in slightly later or as a result of the value changing.
+            // The `NgZone.onStable` always emits outside of the Angular zone, thus we have to re-enter
+            // the Angular zone. This will lead to change detection being called outside of the Angular
+            // zone and the `autocomplete.opened` will also emit outside of the Angular.
+            this._zone.run(() => {
+                const wasOpen = this.panelOpen;
+                this._resetActiveItem();
+                this.autocomplete._setVisibility();
+                this._changeDetectorRef.detectChanges();
+                if (this.panelOpen) {
+                    this._overlayRef.updatePosition();
+                }
                 if (wasOpen !== this.panelOpen) {
-                    this.autocomplete.opened.emit();
+                    // If the `panelOpen` state changed, we need to make sure to emit the `opened` or
+                    // `closed` event, because we may not have emitted it. This can happen
+                    // - if the users opens the panel and there are no options, but the
+                    //   options come in slightly later or as a result of the value changing,
+                    // - if the panel is closed after the user entered a string that did not match any
+                    //   of the available options,
+                    // - if a valid string is entered after an invalid one.
+                    if (this.panelOpen) {
+                        this.autocomplete.opened.emit();
+                    }
+                    else {
+                        this.autocomplete.closed.emit();
+                    }
                 }
-            }
+            });
             return this.panelClosingActions;
         }), 
         // when the first closing event occurs...
@@ -580,22 +624,24 @@ class _MatAutocompleteTriggerBase {
             this._overlayRef = null;
         }
     }
-    _setTriggerValue(value) {
+    _assignOptionValue(value) {
         const toDisplay = this.autocomplete && this.autocomplete.displayWith
             ? this.autocomplete.displayWith(value)
             : value;
         // Simply falling back to an empty string if the display value is falsy does not work properly.
         // The display value can also be the number zero and shouldn't fall back to an empty string.
-        const inputValue = toDisplay != null ? toDisplay : '';
+        this._updateNativeInputValue(toDisplay != null ? toDisplay : '');
+    }
+    _updateNativeInputValue(value) {
         // If it's used within a `MatFormField`, we should set it through the property so it can go
         // through change detection.
         if (this._formField) {
-            this._formField._control.value = inputValue;
+            this._formField._control.value = value;
         }
         else {
-            this._element.nativeElement.value = inputValue;
+            this._element.nativeElement.value = value;
         }
-        this._previousValue = inputValue;
+        this._previousValue = value;
     }
     /**
      * This method closes the panel, and if a value is specified, also sets the associated
@@ -603,12 +649,12 @@ class _MatAutocompleteTriggerBase {
      * stemmed from the user.
      */
     _setValueAndClose(event) {
-        const source = event && event.source;
-        if (source) {
-            this._clearPreviousSelectedOption(source);
-            this._setTriggerValue(source.value);
-            this._onChange(source.value);
-            this.autocomplete._emitSelectEvent(source);
+        const toSelect = event ? event.source : this._pendingAutoselectedOption;
+        if (toSelect) {
+            this._clearPreviousSelectedOption(toSelect);
+            this._assignOptionValue(toSelect.value);
+            this._onChange(toSelect.value);
+            this.autocomplete._emitSelectEvent(toSelect);
             this._element.nativeElement.focus();
         }
         this.closePanel();
@@ -635,21 +681,7 @@ class _MatAutocompleteTriggerBase {
             });
             overlayRef = this._overlay.create(this._getOverlayConfig());
             this._overlayRef = 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'))) {
-                    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();
-                }
-            });
+            this._handleOverlayEvents(overlayRef);
             this._viewportSubscription = this._viewportRuler.change().subscribe(() => {
                 if (this.panelOpen && overlayRef) {
                     overlayRef.updateSize({ width: this._getPanelWidth() });
@@ -786,10 +818,35 @@ 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 => {
+            var _a;
+            // 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((_a = this._valueBeforeAutoSelection) !== null && _a !== void 0 ? _a : '');
+                    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();
+            }
+        });
+    }
 }
-_MatAutocompleteTriggerBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: _MatAutocompleteTriggerBase, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: MAT_AUTOCOMPLETE_SCROLL_STRATEGY }, { token: i2$1.Directionality, optional: true }, { token: MAT_FORM_FIELD, host: true, optional: true }, { token: DOCUMENT, optional: true }, { token: i3.ViewportRuler }, { token: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-_MatAutocompleteTriggerBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: _MatAutocompleteTriggerBase, inputs: { autocomplete: ["matAutocomplete", "autocomplete"], position: ["matAutocompletePosition", "position"], connectedTo: ["matAutocompleteConnectedTo", "connectedTo"], autocompleteAttribute: ["autocomplete", "autocompleteAttribute"], autocompleteDisabled: ["matAutocompleteDisabled", "autocompleteDisabled"] }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: _MatAutocompleteTriggerBase, decorators: [{
+_MatAutocompleteTriggerBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: _MatAutocompleteTriggerBase, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: MAT_AUTOCOMPLETE_SCROLL_STRATEGY }, { token: i2$1.Directionality, optional: true }, { token: MAT_FORM_FIELD, host: true, optional: true }, { token: DOCUMENT, optional: true }, { token: i3.ViewportRuler }, { token: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+_MatAutocompleteTriggerBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.13", type: _MatAutocompleteTriggerBase, inputs: { autocomplete: ["matAutocomplete", "autocomplete"], position: ["matAutocompletePosition", "position"], connectedTo: ["matAutocompleteConnectedTo", "connectedTo"], autocompleteAttribute: ["autocomplete", "autocompleteAttribute"], autocompleteDisabled: ["matAutocompleteDisabled", "autocompleteDisabled"] }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: _MatAutocompleteTriggerBase, decorators: [{
             type: Directive
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
@@ -837,9 +894,9 @@ class MatAutocompleteTrigger extends _MatAutocompleteTriggerBase {
         this._aboveClass = 'mat-autocomplete-panel-above';
     }
 }
-MatAutocompleteTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatAutocompleteTrigger, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-MatAutocompleteTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", host: { listeners: { "focusin": "_handleFocus()", "blur": "_onTouched()", "input": "_handleInput($event)", "keydown": "_handleKeydown($event)" }, properties: { "attr.autocomplete": "autocompleteAttribute", "attr.role": "autocompleteDisabled ? null : \"combobox\"", "attr.aria-autocomplete": "autocompleteDisabled ? null : \"list\"", "attr.aria-activedescendant": "(panelOpen && activeOption) ? activeOption.id : null", "attr.aria-expanded": "autocompleteDisabled ? null : panelOpen.toString()", "attr.aria-owns": "(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id", "attr.aria-haspopup": "!autocompleteDisabled" }, classAttribute: "mat-autocomplete-trigger" }, providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR], exportAs: ["matAutocompleteTrigger"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatAutocompleteTrigger, decorators: [{
+MatAutocompleteTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: MatAutocompleteTrigger, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+MatAutocompleteTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.13", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", host: { listeners: { "focusin": "_handleFocus()", "blur": "_onTouched()", "input": "_handleInput($event)", "keydown": "_handleKeydown($event)", "click": "_handleClick()" }, properties: { "attr.autocomplete": "autocompleteAttribute", "attr.role": "autocompleteDisabled ? null : \"combobox\"", "attr.aria-autocomplete": "autocompleteDisabled ? null : \"list\"", "attr.aria-activedescendant": "(panelOpen && activeOption) ? activeOption.id : null", "attr.aria-expanded": "autocompleteDisabled ? null : panelOpen.toString()", "attr.aria-owns": "(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id", "attr.aria-haspopup": "autocompleteDisabled ? null : \"listbox\"" }, classAttribute: "mat-autocomplete-trigger" }, providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR], exportAs: ["matAutocompleteTrigger"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: MatAutocompleteTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[matAutocomplete], textarea[matAutocomplete]`,
@@ -851,13 +908,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ng
                         '[attr.aria-activedescendant]': '(panelOpen && activeOption) ? activeOption.id : null',
                         '[attr.aria-expanded]': 'autocompleteDisabled ? null : panelOpen.toString()',
                         '[attr.aria-owns]': '(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id',
-                        '[attr.aria-haspopup]': '!autocompleteDisabled',
+                        '[attr.aria-haspopup]': 'autocompleteDisabled ? null : "listbox"',
                         // Note: we use `focusin`, as opposed to `focus`, in order to open the panel
                         // a little earlier. This avoids issues where IE delays the focusing of the input.
                         '(focusin)': '_handleFocus()',
                         '(blur)': '_onTouched()',
                         '(input)': '_handleInput($event)',
                         '(keydown)': '_handleKeydown($event)',
+                        '(click)': '_handleClick()',
                     },
                     exportAs: 'matAutocompleteTrigger',
                     providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR],
@@ -879,9 +937,9 @@ class _MatAutocompleteOriginBase {
         this.elementRef = elementRef;
     }
 }
-_MatAutocompleteOriginBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: _MatAutocompleteOriginBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-_MatAutocompleteOriginBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: _MatAutocompleteOriginBase, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: _MatAutocompleteOriginBase, decorators: [{
+_MatAutocompleteOriginBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: _MatAutocompleteOriginBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+_MatAutocompleteOriginBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.13", type: _MatAutocompleteOriginBase, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: _MatAutocompleteOriginBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 /**
@@ -890,9 +948,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ng
  */
 class MatAutocompleteOrigin extends _MatAutocompleteOriginBase {
 }
-MatAutocompleteOrigin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatAutocompleteOrigin, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-MatAutocompleteOrigin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
+MatAutocompleteOrigin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: MatAutocompleteOrigin, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+MatAutocompleteOrigin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.13", type: MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matAutocompleteOrigin]',
@@ -909,17 +967,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ng
  */
 class MatAutocompleteModule {
 }
-MatAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MatAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatAutocompleteModule, declarations: [MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteOrigin], imports: [OverlayModule, MatOptionModule, MatCommonModule, CommonModule], exports: [MatAutocomplete,
+MatAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: MatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MatAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: MatAutocompleteModule, declarations: [MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteOrigin], imports: [OverlayModule, MatOptionModule, MatCommonModule, CommonModule], exports: [MatAutocomplete,
         MatAutocompleteTrigger,
         MatAutocompleteOrigin,
         CdkScrollableModule,
         MatOptionModule,
         MatCommonModule] });
-MatAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatAutocompleteModule, providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [[OverlayModule, MatOptionModule, MatCommonModule, CommonModule], CdkScrollableModule,
+MatAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: MatAutocompleteModule, providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [[OverlayModule, MatOptionModule, MatCommonModule, CommonModule], CdkScrollableModule,
         MatOptionModule,
         MatCommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.13", ngImport: i0, type: MatAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [OverlayModule, MatOptionModule, MatCommonModule, CommonModule],