fix(autocomplete): not closing when clicking outside while propagation is stopped

Fixes the autocomplete panel not closing if the user clicks outside on an element that stops propagation of the `click` event (e.g. a `mat-chip`).

Fixes #17352.

Author: crisbeto

src/material/autocomplete/autocomplete-trigger.ts

@@ -358,21 +358,23 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
 
   /** Stream of clicks outside of the autocomplete panel. */
   private _getOutsideClickStream(): Observable<any> {
+    // Use capturing so we can close even if propagation is stopped.
+    const eventOptions = {capture: true};
     return merge(
-               fromEvent(this._document, 'click') as Observable<MouseEvent>,
-               fromEvent(this._document, 'touchend') as Observable<TouchEvent>)
-        .pipe(filter(event => {
-          // If we're in the Shadow DOM, the event target will be the shadow root, so we have to
-          // fall back to check the first element in the path of the click event.
-          const clickTarget =
-              (this._isInsideShadowRoot && event.composedPath ? event.composedPath()[0] :
-                                                                event.target) as HTMLElement;
-          const formField = this._formField ? this._formField._elementRef.nativeElement : null;
-
-          return this._overlayAttached && clickTarget !== this._element.nativeElement &&
-              (!formField || !formField.contains(clickTarget)) &&
-              (!!this._overlayRef && !this._overlayRef.overlayElement.contains(clickTarget));
-        }));
+      fromEvent(this._document, 'click', eventOptions) as Observable<MouseEvent>,
+      fromEvent(this._document, 'touchend', eventOptions) as Observable<TouchEvent>
+    ).pipe(filter(event => {
+      // If we're in the Shadow DOM, the event target will be the shadow root, so we have to
+      // fall back to check the first element in the path of the click event.
+      const clickTarget =
+          (this._isInsideShadowRoot && event.composedPath ? event.composedPath()[0] :
+                                                            event.target) as HTMLElement;
+      const formField = this._formField ? this._formField._elementRef.nativeElement : null;
+
+      return this._overlayAttached && clickTarget !== this._element.nativeElement &&
+          (!formField || !formField.contains(clickTarget)) &&
+          (!!this._overlayRef && !this._overlayRef.overlayElement.contains(clickTarget));
+    }));
   }
 
   // Implemented as part of ControlValueAccessor.

src/material/autocomplete/autocomplete.spec.ts

@@ -188,6 +188,20 @@ describe('MatAutocomplete', () => {
           .toEqual('', `Expected clicking outside the panel to close the panel.`);
     }));
 
+    it('should close the panel when clicking away and propagation is stopped', fakeAsync(() => {
+      const trigger = fixture.componentInstance.trigger;
+      dispatchFakeEvent(input, 'focusin');
+      fixture.detectChanges();
+      zone.simulateZoneExit();
+
+      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+
+      fixture.nativeElement.querySelector('.stop-propagation').click();
+      fixture.detectChanges();
+
+      expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+    }));
+
     it('should close the panel when the user taps away on a touch device', fakeAsync(() => {
       dispatchFakeEvent(input, 'focus');
       fixture.detectChanges();
@@ -2584,6 +2598,8 @@ const SIMPLE_AUTOCOMPLETE_TEMPLATE = `
       <span>{{ state.code }}: {{ state.name }}</span>
     </mat-option>
   </mat-autocomplete>
+
+  <button class="stop-propagation" (click)="$event.stopPropagation()">Click me</button>
 `;
 
 @Component({template: SIMPLE_AUTOCOMPLETE_TEMPLATE})