From 3728555c6e37dbeb1756366c797c99655d8ffa1f Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 13 Dec 2017 22:51:07 +0100
Subject: [PATCH] fix(datepicker): leaking backdropClick subscriptions (#8919)

Currently the datepicker re-subscribes to the same `backdropClicked` stream whenever the popup is attached, which causes it to stack up multiple subscriptions for every time the calendar is opened. These changes move the subscription so it only happens once.
---
 src/lib/datepicker/datepicker.spec.ts | 23 +++++++++++++++++++++++
 src/lib/datepicker/datepicker.ts      |  3 +--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts
index eadd19caf9f..53bcb684d5e 100644
--- a/src/lib/datepicker/datepicker.spec.ts
+++ b/src/lib/datepicker/datepicker.spec.ts
@@ -340,6 +340,29 @@ describe('MatDatepicker', () => {
 
         expect(() => fixture.detectChanges()).not.toThrow();
       });
+
+      it('should clear out the backdrop subscriptions on close', () => {
+        for (let i = 0; i < 3; i++) {
+          testComponent.datepicker.open();
+          fixture.detectChanges();
+
+          testComponent.datepicker.close();
+          fixture.detectChanges();
+        }
+
+        testComponent.datepicker.open();
+        fixture.detectChanges();
+
+        spyOn(testComponent.datepicker, 'close').and.callThrough();
+
+        const backdrop = document.querySelector('.cdk-overlay-backdrop')! as HTMLElement;
+
+        backdrop.click();
+        fixture.detectChanges();
+
+        expect(testComponent.datepicker.close).toHaveBeenCalledTimes(1);
+        expect(testComponent.datepicker.opened).toBe(false);
+      });
     });
 
     describe('datepicker with too many inputs', () => {
diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
index 61d150e5a8b..9a2c7e41bd2 100644
--- a/src/lib/datepicker/datepicker.ts
+++ b/src/lib/datepicker/datepicker.ts
@@ -352,8 +352,6 @@ export class MatDatepicker<D> implements OnDestroy {
         this._popupRef.updatePosition();
       });
     }
-
-    this._popupRef.backdropClick().subscribe(() => this.close());
   }
 
   /** Create the popup. */
@@ -368,6 +366,7 @@ export class MatDatepicker<D> implements OnDestroy {
     });
 
     this._popupRef = this._overlay.create(overlayConfig);
+    this._popupRef.backdropClick().subscribe(() => this.close());
   }
 
   /** Create the popup PositionStrategy. */