fix(autocomplete): escape key inconsistency on IE (#9777)

Brings the autocomplete escape key behavior on IE in line with other browsers. Currently pressing escape on IE will cause it to revert the display value to the one it had on focus, however it won't dispatch any events and the model value will be out of sync. None of the other browsers (event Edge) have this behavior.

Author: crisbeto

src/lib/autocomplete/autocomplete-trigger.ts

@@ -277,6 +277,14 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   _handleKeydown(event: KeyboardEvent): void {
     const keyCode = event.keyCode;
 
+    // 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) {
+      event.preventDefault();
+    }
+
     // 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 (this.panelOpen && (keyCode === ESCAPE || (keyCode === UP_ARROW && event.altKey))) {

src/lib/autocomplete/autocomplete.spec.ts

@@ -946,6 +946,13 @@ describe('MatAutocomplete', () => {
       expect(stopPropagationSpy).toHaveBeenCalled();
     }));
 
+    it('should prevent the default action when pressing escape', fakeAsync(() => {
+      const escapeEvent = dispatchKeyboardEvent(input, 'keydown', ESCAPE);
+      fixture.detectChanges();
+
+      expect(escapeEvent.defaultPrevented).toBe(true);
+    }));
+
     it('should close the panel when pressing ALT + UP_ARROW', fakeAsync(() => {
       const trigger = fixture.componentInstance.trigger;
       const upArrowEvent = createKeyboardEvent('keydown', UP_ARROW);