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

@@ -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', () => {

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. */