fix(material/autocomplete): closing immediately when input is focused programmatically

Each autocomplete has a `click` listener on the body that closes the panel when the
user has clicked somewhere outside of it. This breaks down if the panel is opened
through a click outside of the form field, because we bind the listener before the
event has bubbled all the way to the `body` so when it does get there, it closes
immediately.

These changes fix the issue by taking advantage of the fact that focus usually moves
on `mousedown` so for "real" click the input will have already lost focus by the time
the `click` event happens.

Fixes #3106.

Author: crisbeto

src/material-experimental/mdc-autocomplete/autocomplete.spec.ts

@@ -9,6 +9,7 @@ import {
   dispatchEvent,
   dispatchFakeEvent,
   dispatchKeyboardEvent,
+  dispatchMouseEvent,
   MockNgZone,
   typeInElement,
 } from '@angular/cdk/testing/private';
@@ -1241,6 +1242,24 @@ describe('MDC-based MatAutocomplete', () => {
           .toBeFalsy('Expected panel to be removed.');
     }));
 
+    it('should not close when a click event occurs on the outside while the panel has focus',
+      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.');
+
+        dispatchMouseEvent(document.body, 'click');
+        fixture.detectChanges();
+
+        expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
+        expect(trigger.panelOpen).toBe(true, 'Expected panel to stay open.');
+      }));
+
     it('should reset the active option when closing with the escape key', fakeAsync(() => {
       const trigger = fixture.componentInstance.trigger;
 

src/material/autocomplete/autocomplete-trigger.ts

@@ -360,6 +360,11 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
           const customOrigin = this.connectedTo ? this.connectedTo.elementRef.nativeElement : null;
 
           return this._overlayAttached && clickTarget !== this._element.nativeElement &&
+              // Normally focus moves inside `mousedown` so this condition will almost always be
+              // true. Its main purpose is to handle the case where the input is focused from an
+              // outside click which propagates up to the `body` listener within the same sequence
+              // and causes the panel to close immediately (see #3106).
+              this._document.activeElement !== this._element.nativeElement &&
               (!formField || !formField.contains(clickTarget)) &&
               (!customOrigin || !customOrigin.contains(clickTarget)) &&
               (!!this._overlayRef && !this._overlayRef.overlayElement.contains(clickTarget));

src/material/autocomplete/autocomplete.spec.ts

@@ -11,6 +11,7 @@ import {
   dispatchFakeEvent,
   dispatchKeyboardEvent,
   typeInElement,
+  dispatchMouseEvent,
 } from '@angular/cdk/testing/private';
 import {
   ChangeDetectionStrategy,
@@ -1238,6 +1239,24 @@ describe('MatAutocomplete', () => {
           .toBeFalsy('Expected panel to be removed.');
     }));
 
+    it('should not close when a click event occurs on the outside while the panel has focus',
+      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.');
+
+        dispatchMouseEvent(document.body, 'click');
+        fixture.detectChanges();
+
+        expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
+        expect(trigger.panelOpen).toBe(true, 'Expected panel to stay open.');
+      }));
+
     it('should reset the active option when closing with the escape key', fakeAsync(() => {
       const trigger = fixture.componentInstance.trigger;