Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(datepicker): enable scrolling when scope destroyed.
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
devversion authored and ThomasBurleson committed Apr 1, 2016
1 parent f790e93 commit 4d639b0
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 2 deletions.
7 changes: 5 additions & 2 deletions src/components/datepicker/datePicker.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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();

Expand Down
29 changes: 29 additions & 0 deletions src/components/datepicker/datePicker.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -515,6 +515,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() {
Expand Down

0 comments on commit 4d639b0

Please sign in to comment.