fix(autocomplete): alt + up arrow to close panel not working (angular…

…#15364)

Currently we support the part of the spec where the autocomplete panel is supposed to close when pressing alt + up arrow, however at some point we added more functionality that ends up reopening the panel immediately. These changes ensure that the user is able to close the panel via alt + up arrow.

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();
         }
       });
 

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(() => {