fix(datepicker): enable scrolling when scope destroyed.

When we change the route while the calendar pane is open, the scroll mask won't be removed. We need to re-enable scrolling on scope destruction.
In this case, we also have to check for the pane to be open, because otherwise we may accidentally remove another scroll mask.

Fixes #7542. Closes #7544.

Author: devversion

src/components/datepicker/datePicker.js

@@ -527,6 +527,10 @@
     this.calendarPane.classList.remove('md-pane-open');
     this.calendarPane.classList.remove('md-datepicker-pos-adjusted');
 
+    if (this.isCalendarOpen) {
+      this.$mdUtil.enableScrolling();
+    }
+
     if (this.calendarPane.parentNode) {
       // Use native DOM removal because we do not want any of the angular state of this element
       // to be disposed.
@@ -570,11 +574,10 @@
   /** Close the floating calendar pane. */
   DatePickerCtrl.prototype.closeCalendarPane = function() {
     if (this.isCalendarOpen) {
-      this.isCalendarOpen = false;
       this.detachCalendarPane();
+      this.isCalendarOpen = false;
       this.calendarPaneOpenedFrom.focus();
       this.calendarPaneOpenedFrom = null;
-      this.$mdUtil.enableScrolling();
 
       this.ngModelCtrl.$setTouched();
 

src/components/datepicker/datePicker.spec.js

@@ -481,6 +481,35 @@ describe('md-date-picker', function() {
       expect(controller.calendarPaneOpenedFrom).toBe(null);
       expect(controller.isCalendarOpen).toBe(false);
     });
+
+    it('should re-enable scrolling probably', function() {
+      var maskLength = getMaskLength();
+
+      controller.openCalendarPane({
+        target: controller.inputElement
+      });
+
+      expect(getMaskLength()).toBe(maskLength + 1);
+
+      controller.closeCalendarPane();
+
+      expect(getMaskLength()).toBe(maskLength);
+
+      controller.openCalendarPane({
+        target: controller.inputElement
+      });
+
+      expect(getMaskLength()).toBe(maskLength + 1);
+
+      // Trigger a scope destruction, like when a route changes.
+      scope.$destroy();
+
+      expect(getMaskLength()).toBe(maskLength);
+
+      function getMaskLength() {
+        return document.body.querySelectorAll('.md-scroll-mask').length;
+      }
+    });
   });
 
   describe('md-calendar-change', function() {