fix(material/autocomplete): don't prevent escape key actions with modifiers (#20706)

Doesn't handle escape key presses if the user is pressing a modifier key. This brings
the autocomplete in line with most other components that were changed by #16202.

(cherry picked from commit d8396f2)

Author: crisbeto

src/material-experimental/mdc-autocomplete/autocomplete.spec.ts

@@ -1186,6 +1186,24 @@ describe('MDC-based MatAutocomplete', () => {
       expect(escapeEvent.defaultPrevented).toBe(true);
     }));
 
+    it('should not close the panel when pressing escape with a modifier', fakeAsync(() => {
+      const trigger = fixture.componentInstance.trigger;
+
+      input.focus();
+      flush();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(input, 'Expected input to be focused.');
+      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+
+      const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE, undefined, {alt: true});
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
+      expect(trigger.panelOpen).toBe(true, 'Expected panel to stay open.');
+      expect(event.defaultPrevented).toBe(false, 'Expected default action not to be prevented.');
+    }));
+
     it('should close the panel when pressing ALT + UP_ARROW', fakeAsync(() => {
       const trigger = fixture.componentInstance.trigger;
       const upArrowEvent = createKeyboardEvent('keydown', UP_ARROW, undefined, {alt: true});

src/material/autocomplete/autocomplete-trigger.ts

@@ -7,7 +7,7 @@
  */
 import {Directionality} from '@angular/cdk/bidi';
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {DOWN_ARROW, ENTER, ESCAPE, TAB, UP_ARROW} from '@angular/cdk/keycodes';
+import {DOWN_ARROW, ENTER, ESCAPE, TAB, UP_ARROW, hasModifierKey} from '@angular/cdk/keycodes';
 import {
   FlexibleConnectedPositionStrategy,
   Overlay,
@@ -387,7 +387,7 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
     // 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) {
+    if (keyCode === ESCAPE && !hasModifierKey(event)) {
       event.preventDefault();
     }
 
@@ -565,7 +565,7 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
    */
   private _clearPreviousSelectedOption(skip: MatOption) {
     this.autocomplete.options.forEach(option => {
-      if (option != skip && option.selected) {
+      if (option !== skip && option.selected) {
         option.deselect();
       }
     });
@@ -594,7 +594,8 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
       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 || (event.keyCode === UP_ARROW && event.altKey)) {
+        if ((event.keyCode === ESCAPE && !hasModifierKey(event)) ||
+            (event.keyCode === UP_ARROW && hasModifierKey(event, 'altKey'))) {
           this._resetActiveItem();
           this._closeKeyEventStream.next();
 

src/material/autocomplete/autocomplete.spec.ts

@@ -1183,6 +1183,24 @@ describe('MatAutocomplete', () => {
       expect(escapeEvent.defaultPrevented).toBe(true);
     }));
 
+    it('should not close the panel when pressing escape with a modifier', fakeAsync(() => {
+      const trigger = fixture.componentInstance.trigger;
+
+      input.focus();
+      flush();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(input, 'Expected input to be focused.');
+      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+
+      const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE, undefined, {alt: true});
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
+      expect(trigger.panelOpen).toBe(true, 'Expected panel to stay open.');
+      expect(event.defaultPrevented).toBe(false, 'Expected default action not to be prevented.');
+    }));
+
     it('should close the panel when pressing ALT + UP_ARROW', fakeAsync(() => {
       const trigger = fixture.componentInstance.trigger;
       const upArrowEvent = createKeyboardEvent('keydown', UP_ARROW, undefined, {alt: true});