From e6053736d61dfb921b2f1cb7003cb774485de13c Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Mon, 20 Jul 2015 17:55:59 -0700
Subject: [PATCH] fix(datepicker): prevent scrolling while calendar pane is
 open.

---
 src/components/datepicker/datePicker.js   | 11 ++++++++++-
 src/components/datepicker/datePicker.scss |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/datepicker/datePicker.js b/src/components/datepicker/datePicker.js
index 6a14fba72d1..67ac10bd5b2 100644
--- a/src/components/datepicker/datePicker.js
+++ b/src/components/datepicker/datePicker.js
@@ -4,9 +4,9 @@
   // PRE RELEASE
   // TODO(jelbourn): Documentation
   // TODO(jelbourn): Demo that uses moment.js
-  // TODO(jelbourn): make sure this plays well with validation and ngMessages.
 
   // POST RELEASE
+  // TODO(jelbourn): make sure this plays well with validation and ngMessages.
   // TODO(jelbourn): calendar pane doesn't open up outside of visible viewport.
   // TODO(jelbourn): forward more attributes to the internal input (required, autofocus, etc.)
   // TODO(jelbourn): error state
@@ -307,6 +307,13 @@
       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
+      // an md-content. This means that, if the container is scrolled, the pane would remain
+      // stationary. To remedy this, we disable scrolling while the calendar pane is open, which
+      // also matches the native behavior for things like `<select>` on Mac and Windows.
+      this.$mdUtil.disableScrollAround(this.calendarPane);
+
       // 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;
@@ -322,6 +329,8 @@
     this.detachCalendarPane();
     this.calendarPaneOpenedFrom.focus();
     this.calendarPaneOpenedFrom = null;
+    this.$mdUtil.enableScrolling();
+
     document.body.removeEventListener('click', this.bodyClickHandler);
   };
 
diff --git a/src/components/datepicker/datePicker.scss b/src/components/datepicker/datePicker.scss
index 6debd59b45b..2c9bfe71225 100644
--- a/src/components/datepicker/datePicker.scss
+++ b/src/components/datepicker/datePicker.scss
@@ -16,7 +16,7 @@ $md-datepicker-open-animation-duration: 0.2s;
 .md-datepicker-input {
   @include md-flat-input();
   min-width: 120px;
-  max-width: $md-calendar-width;
+  max-width: $md-calendar-width - $md-datepicker-button-gap;
 }
 
 // Container for the datepicker input.