fix(autocomplete): reopen panel on input click

Currently if the user clicks an autocomplete to open it, selects an option and then clicks again, the panel won't open, because we use `focus` and the input was focused already. These changes add an extra `click` listener so the panel can reopen.

Fixes #15177.

Author: crisbeto

src/material/autocomplete/autocomplete-trigger.ts

@@ -115,6 +115,7 @@ export function getMatAutocompleteMissingPanelError(): Error {
     '(blur)': '_onTouched()',
     '(input)': '_handleInput($event)',
     '(keydown)': '_handleKeydown($event)',
+    '(click)': '_handleClick()',
   },
   exportAs: 'matAutocompleteTrigger',
   providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR]
@@ -445,6 +446,12 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnChanges,
     }
   }
 
+  _handleClick() {
+    if (!this.panelOpen) {
+      this.openPanel();
+    }
+  }
+
   /**
    * In "auto" mode, the label will animate down as soon as focus is lost.
    * This causes the value to jump when selecting an option with the mouse.

src/material/autocomplete/autocomplete.spec.ts

@@ -491,6 +491,29 @@ describe('MatAutocomplete', () => {
       expect(input.getAttribute('aria-haspopup')).toBe('false');
     });
 
+    it('should close the panel when pressing escape', 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.');
+
+      trigger.closePanel();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
+      expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+
+      input.click();
+      flush();
+      fixture.detectChanges();
+
+      expect(trigger.panelOpen).toBe(true, 'Expected panel to reopen on click.');
+    }));
+
   });
 
   it('should have the correct text direction in RTL', () => {

tools/public_api_guard/material/autocomplete.d.ts

@@ -82,6 +82,7 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, OnC
     readonly panelOpen: boolean;
     position: 'auto' | 'above' | 'below';
     constructor(_element: ElementRef<HTMLInputElement>, _overlay: Overlay, _viewContainerRef: ViewContainerRef, _zone: NgZone, _changeDetectorRef: ChangeDetectorRef, scrollStrategy: any, _dir: Directionality, _formField: MatFormField, _document: any, _viewportRuler?: ViewportRuler | undefined);
+    _handleClick(): void;
     _handleFocus(): void;
     _handleInput(event: KeyboardEvent): void;
     _handleKeydown(event: KeyboardEvent): void;