diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts index 2e66467f48aa..74abf3800f70 100644 --- a/src/material/autocomplete/autocomplete-trigger.ts +++ b/src/material/autocomplete/autocomplete-trigger.ts @@ -611,6 +611,11 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnChanges, if (event.keyCode === ESCAPE || (event.keyCode === UP_ARROW && event.altKey)) { this._resetActiveItem(); this._closeKeyEventStream.next(); + + // 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(); } }); diff --git a/src/material/autocomplete/autocomplete.spec.ts b/src/material/autocomplete/autocomplete.spec.ts index 61f2876ad4ca..edde6a91ac26 100644 --- a/src/material/autocomplete/autocomplete.spec.ts +++ b/src/material/autocomplete/autocomplete.spec.ts @@ -1111,6 +1111,7 @@ describe('MatAutocomplete', () => { const trigger = fixture.componentInstance.trigger; const upArrowEvent = createKeyboardEvent('keydown', UP_ARROW); Object.defineProperty(upArrowEvent, 'altKey', {get: () => true}); + spyOn(upArrowEvent, 'stopPropagation').and.callThrough(); input.focus(); flush(); @@ -1124,6 +1125,7 @@ describe('MatAutocomplete', () => { expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.'); expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.'); + expect(upArrowEvent.stopPropagation).toHaveBeenCalled(); })); it('should close the panel when tabbing away from a trigger without results', fakeAsync(() => {