From 985f03c0fbb5ce2f7f5bfe7d844bbf6036fd8094 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Wed, 25 Nov 2015 11:37:05 -0800
Subject: [PATCH] fix(datepicker): prevent calendar pane being in wrong
 position after body scrolling is disabled. Fixes #5201

---
 src/components/datepicker/datePicker.js      |  9 ++---
 src/components/datepicker/datePicker.spec.js | 36 ++++++++++++++++++--
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/components/datepicker/datePicker.js b/src/components/datepicker/datePicker.js
index abfb33e9ea9..cb13b55c342 100644
--- a/src/components/datepicker/datePicker.js
+++ b/src/components/datepicker/datePicker.js
@@ -502,8 +502,6 @@
     if (!this.isCalendarOpen && !this.isDisabled) {
       this.isCalendarOpen = true;
       this.calendarPaneOpenedFrom = event.target;
-      this.attachCalendarPane();
-      this.focusCalendar();
 
       // Because the calendar pane is attached directly to the body, it is possible that the
       // rest of the component (input, etc) is in a different scrolling container, such as
@@ -512,11 +510,14 @@
       // also matches the native behavior for things like `<select>` on Mac and Windows.
       this.$mdUtil.disableScrollAround(this.calendarPane);
 
+      this.attachCalendarPane();
+      this.focusCalendar();
+
       // Attach click listener inside of a timeout because, if this open call was triggered by a
       // click, we don't want it to be immediately propogated up to the body and handled.
       var self = this;
       this.$mdUtil.nextTick(function() {
-        document.body.addEventListener('click', self.bodyClickHandler);
+        document.documentElement.addEventListener('click', self.bodyClickHandler);
       }, false);
 
       window.addEventListener('resize', this.windowResizeHandler);
@@ -532,7 +533,7 @@
       this.calendarPaneOpenedFrom = null;
       this.$mdUtil.enableScrolling();
 
-      document.body.removeEventListener('click', this.bodyClickHandler);
+      document.documentElement.removeEventListener('click', this.bodyClickHandler);
       window.removeEventListener('resize', this.windowResizeHandler);
     }
   };
diff --git a/src/components/datepicker/datePicker.spec.js b/src/components/datepicker/datePicker.spec.js
index 414bc412380..5617bb2cbf6 100644
--- a/src/components/datepicker/datePicker.spec.js
+++ b/src/components/datepicker/datePicker.spec.js
@@ -333,14 +333,14 @@ describe('md-date-picker', function() {
       // Expect that the pane is on-screen.
       var paneRect = controller.calendarPane.getBoundingClientRect();
       expect(paneRect.bottom).toBeLessThan(window.innerHeight + 1);
-      document.body.removeChild(superLongElement);
 
       document.body.removeChild(element);
+      document.body.removeChild(superLongElement);
     });
 
     it('should adjust the pane position if it would go off-screen if body is not scrollable',
         function() {
-      // Make the body super huge and scroll halfway down.
+      // Make the body super huge and scroll down a bunch.
       var body = document.body;
       var superLongElement = document.createElement('div');
       superLongElement.style.height = '10000px';
@@ -365,13 +365,43 @@ describe('md-date-picker', function() {
       // Expect that the pane is on-screen.
       var paneRect = controller.calendarPane.getBoundingClientRect();
       expect(paneRect.bottom).toBeLessThan(window.innerHeight + 1);
-      body.removeChild(superLongElement);
 
       // Restore body to pre-test state.
       body.removeChild(element);
+      body.removeChild(superLongElement);
       body.style.overflow = previousBodyOverflow;
     });
 
+    it('should keep the calendar pane in the right place with body scrolling disabled', function() {
+      // Make the body super huge and scroll down a bunch.
+      var body = document.body;
+      var superLongElement = document.createElement('div');
+      superLongElement.style.height = '10000px';
+      superLongElement.style.width = '1px';
+      body.appendChild(superLongElement);
+      body.scrollTop = 700;
+
+      // Absolutely position the picker such that the pane position doesn't need to be adjusted.
+      // (1/4 of the way down the screen).
+      element.style.position = 'absolute';
+      element.style.top = (document.body.scrollTop + (window.innerHeight * 0.25)) + 'px';
+      element.style.left = '0';
+      body.appendChild(element);
+
+      // Open the pane.
+      element.querySelector('md-button').click();
+      $timeout.flush();
+
+      // Expect that the calendar pane is in the same position as the inline datepicker.
+      var paneRect = controller.calendarPane.getBoundingClientRect();
+      var triggerRect = controller.inputContainer.getBoundingClientRect();
+      expect(paneRect.top).toBe(triggerRect.top);
+
+      // Restore body to pre-test state.
+      body.removeChild(superLongElement);
+      body.removeChild(element);
+    });
+
     it('should shink the calendar pane when it would otherwise not fit on the screen', function() {
       // Fake the window being very narrow so that the calendar pane won't fit on-screen.
       controller.$window = {innerWidth: 200, innherHeight: 800};