diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 8efa9fe4d238..b72d99902e9e 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/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))) { diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index f54065af3f03..3bf1f45483b4 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/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);