From 8dbe14633293e63ae833be3f14a69c463a6710f2 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sat, 19 Dec 2020 14:42:51 +0100
Subject: [PATCH] fix(material/autocomplete): not closing when clicking outside
 using auxilliary button

Fixes that the autocomplete panel doesn't close when the user presses outside using the
middle or right mouse button.
---
 .../mdc-autocomplete/autocomplete.spec.ts            | 12 ++++++++++++
 src/material/autocomplete/autocomplete-trigger.ts    |  1 +
 src/material/autocomplete/autocomplete.spec.ts       | 12 ++++++++++++
 3 files changed, 25 insertions(+)

diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts b/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts
index 3fd62bd7630a..fcaeaa33680f 100644
--- a/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts
+++ b/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts
@@ -187,6 +187,18 @@ describe('MDC-based MatAutocomplete', () => {
           .toEqual('', `Expected clicking outside the panel to close the panel.`);
     }));
 
+    it('should close the panel when the user clicks away via auxilliary button', fakeAsync(() => {
+      dispatchFakeEvent(input, 'focusin');
+      fixture.detectChanges();
+      zone.simulateZoneExit();
+      dispatchFakeEvent(document, 'auxclick');
+
+      expect(fixture.componentInstance.trigger.panelOpen)
+          .toBe(false, `Expected clicking outside the panel to set its state to closed.`);
+      expect(overlayContainerElement.textContent)
+          .toEqual('', `Expected clicking outside the panel to close the panel.`);
+    }));
+
     it('should close the panel when the user taps away on a touch device', fakeAsync(() => {
       dispatchFakeEvent(input, 'focus');
       fixture.detectChanges();
diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts
index 03327273b4e4..1939faa1792b 100644
--- a/src/material/autocomplete/autocomplete-trigger.ts
+++ b/src/material/autocomplete/autocomplete-trigger.ts
@@ -349,6 +349,7 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
   private _getOutsideClickStream(): Observable<any> {
     return merge(
             fromEvent(this._document, 'click') as Observable<MouseEvent>,
+            fromEvent(this._document, 'auxclick') 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
diff --git a/src/material/autocomplete/autocomplete.spec.ts b/src/material/autocomplete/autocomplete.spec.ts
index fa09e0ddbc51..6b38d62a616e 100644
--- a/src/material/autocomplete/autocomplete.spec.ts
+++ b/src/material/autocomplete/autocomplete.spec.ts
@@ -188,6 +188,18 @@ describe('MatAutocomplete', () => {
           .toEqual('', `Expected clicking outside the panel to close the panel.`);
     }));
 
+    it('should close the panel when the user clicks away via auxilliary button', fakeAsync(() => {
+      dispatchFakeEvent(input, 'focusin');
+      fixture.detectChanges();
+      zone.simulateZoneExit();
+      dispatchFakeEvent(document, 'auxclick');
+
+      expect(fixture.componentInstance.trigger.panelOpen)
+          .toBe(false, `Expected clicking outside the panel to set its state to closed.`);
+      expect(overlayContainerElement.textContent)
+          .toEqual('', `Expected clicking outside the panel to close the panel.`);
+    }));
+
     it('should close the panel when the user taps away on a touch device', fakeAsync(() => {
       dispatchFakeEvent(input, 'focus');
       fixture.detectChanges();