fix(datepicker): improved overlay positioning (#9432)

The current approach for positioning the datepicker's calendar works by expanding the input container in order to fill a gap in the floating calendar pane and using negative margins to prevent the UI from jumping around. This comes with some drawbacks:
* It causes the input element to shift down slightly when the calendar gets opened.
* It can shift all of the elements surrounding the datepicker, despite the negative margins.
* It makes it hard to refactor the positioning.

This new approach solves all of the above-mentioned issues by using an element with a box-shadow to create the overlay, avoiding the need for expanding the container.

Referencing #9342.

Author: crisbeto

src/components/datepicker/datePicker-theme.scss

@@ -60,12 +60,18 @@
     }
   }
 
-  .md-datepicker-open .md-datepicker-input-container,
+  .md-datepicker-calendar {
+    background: '{{background-A100}}';
+  }
+
+  $mask-color: '{{background-hue-1}}';
+
+  // The box-shadow acts as the background for the overlay.
   .md-datepicker-input-mask-opaque {
-    background: '{{background-hue-1}}';
+    box-shadow: 0 0 0 9999px $mask-color;
   }
 
-  .md-datepicker-calendar {
-    background: '{{background-A100}}';
+  .md-datepicker-open .md-datepicker-input-container {
+    background: $mask-color;
   }
 }

src/components/datepicker/datePicker.scss

@@ -53,6 +53,7 @@ md-datepicker {
   @include md-flat-input();
   min-width: 120px;
   max-width: $md-calendar-width - $md-datepicker-button-gap;
+  padding: 0 0 $md-datepicker-border-bottom-gap;
 }
 
 // If the datepicker is inside of a md-input-container
@@ -94,7 +95,6 @@ md-datepicker {
   // Position relative in order to absolutely position the down-triangle button within.
   position: relative;
 
-  padding-bottom: $md-datepicker-border-bottom-gap;
   border-bottom-width: 1px;
   border-bottom-style: solid;
 
@@ -139,29 +139,16 @@ md-datepicker {
 
 // Portion of the floating panel that sits, invisibly, on top of the input.
 .md-datepicker-input-mask {
-  // It needs to be 1px shorter because of the datepicker-input-container's bottom border,
-  // which can cause a slight hole in the mask when it's inside a md-input-container.
-  height: $md-datepicker-input-mask-height - 1px;
+  height: $md-datepicker-input-mask-height;
   width: $md-calendar-width;
   position: relative;
+  overflow: hidden;
 
   background: transparent;
   pointer-events: none;
   cursor: text;
 }
 
-.md-datepicker-input-mask-opaque {
-  position: absolute;
-  right: 0;
-  left: 120px;
-  height: 100%;
-
-  // The margin pulls it an extra pixel to the left, which gives it a slight overlap
-  // with the input container. This ensures that there are no gaps between the two
-  // elements.
-  margin-left: -1px;
-}
-
 // The calendar portion of the floating pane (vs. the input mask).
 .md-datepicker-calendar {
   opacity: 0;
@@ -231,26 +218,8 @@ md-datepicker[disabled] {
 .md-datepicker-open {
   overflow: hidden;
 
-  .md-datepicker-input-container {
-    // The negative bottom margin prevents the content around the datepicker
-    // from jumping when it gets opened.
-    margin-bottom: -$md-datepicker-border-bottom-gap;
-  }
-
-  .md-icon-button + .md-datepicker-input-container {
-    @include rtl-prop(margin-left, margin-right, -$md-datepicker-button-gap, auto);
-  }
-
-  .md-datepicker-input,
-  label:not(.md-no-float):not(.md-container-ignore) {
-    margin-bottom: -$md-datepicker-border-bottom-gap;
-  }
-
-  // This needs some extra specificity in order to override
-  // the focused/invalid border colors.
-  input.md-datepicker-input {
-    @include rtl-prop(margin-left, margin-right, 24px, auto);
-    height: $md-datepicker-input-mask-height;
+  .md-datepicker-input-container,
+  input.md-input {
     border-bottom-color: transparent;
   }
 

src/components/datepicker/js/datepickerDirective.js

@@ -271,9 +271,9 @@
 
     /**
      * Element covering everything but the input in the top of the floating calendar pane.
-     * @type {HTMLElement}
+     * @type {!angular.JQLite}
      */
-    this.inputMask = $element[0].querySelector('.md-datepicker-input-mask-opaque');
+    this.inputMask = angular.element($element[0].querySelector('.md-datepicker-input-mask-opaque'));
 
     /** @final {!angular.JQLite} */
     this.$element = $element;
@@ -332,6 +332,12 @@
     /** The built-in Angular date filter. */
     this.ngDateFilter = $filter('date');
 
+    /** @type {Number} Extra margin for the left side of the floating calendar pane. */
+    this.leftMargin = 20;
+
+    /** @type {Number} Extra margin for the top of the floating calendar. Gets determined on the first open. */
+    this.topMargin = null;
+
     // Unless the user specifies so, the datepicker should not be a tab stop.
     // This is necessary because ngAria might add a tabindex to anything with an ng-model
     // (based on whether or not the user has turned that particular feature on/off).
@@ -616,10 +622,14 @@
     var elementRect = this.inputContainer.getBoundingClientRect();
     var bodyRect = body.getBoundingClientRect();
 
+    if (!this.topMargin || this.topMargin < 0) {
+      this.topMargin = (this.inputMask.parent().prop('clientHeight') - this.ngInputElement.prop('clientHeight')) / 2;
+    }
+
     // Check to see if the calendar pane would go off the screen. If so, adjust position
     // accordingly to keep it within the viewport.
-    var paneTop = elementRect.top - bodyRect.top;
-    var paneLeft = elementRect.left - bodyRect.left;
+    var paneTop = elementRect.top - bodyRect.top - this.topMargin;
+    var paneLeft = elementRect.left - bodyRect.left - this.leftMargin;
 
     // If ng-material has disabled body scrolling (for example, if a dialog is open),
     // then it's possible that the already-scrolled body has a negative top/left. In this case,
@@ -636,6 +646,17 @@
     var viewportBottom = viewportTop + this.$window.innerHeight;
     var viewportRight = viewportLeft + this.$window.innerWidth;
 
+    // Creates an overlay with a hole the same size as element. We remove a pixel or two
+    // on each end to make it overlap slightly. The overlay's background is added in
+    // the theme in the form of a box-shadow with a huge spread.
+    this.inputMask.css({
+      position: 'absolute',
+      left: this.leftMargin + 'px',
+      top: this.topMargin + 'px',
+      width: (elementRect.width - 1) + 'px',
+      height: (elementRect.height - 2) + 'px'
+    });
+
     // If the right edge of the pane would be off the screen and shifting it left by the
     // difference would not go past the left edge of the screen. If the calendar pane is too
     // big to fit on the screen at all, move it to the left of the screen and scale the entire
@@ -664,12 +685,6 @@
     calendarPane.style.top = paneTop + 'px';
     document.body.appendChild(calendarPane);
 
-    // The top of the calendar pane is a transparent box that shows the text input underneath.
-    // Since the pane is floating, though, the page underneath the pane *adjacent* to the input is
-    // also shown unless we cover it up. The inputMask does this by filling up the remaining space
-    // based on the width of the input.
-    this.inputMask.style.left = elementRect.width + 'px';
-
     // Add CSS class after one frame to trigger open animation.
     this.$$rAF(function() {
       calendarPane.classList.add('md-pane-open');

src/components/datepicker/js/datepickerDirective.spec.js

@@ -382,7 +382,7 @@ describe('md-datepicker', function() {
       $timeout.flush();
 
       expect(controller.calendarPane.offsetHeight).toBeGreaterThan(0);
-      expect(controller.inputMask.style.left).toBe(controller.inputContainer.clientWidth + 'px');
+      expect(controller.inputMask[0].style.left).toBeTruthy();
 
       // Click off of the calendar.
       document.body.click();
@@ -499,7 +499,8 @@ describe('md-datepicker', function() {
       var triggerRect = controller.inputContainer.getBoundingClientRect();
 
       // We expect the offset to be close to the exact height, because on IE there are some deviations.
-      expect(paneRect.top).toBeCloseTo(triggerRect.top, 0.5);
+      expect(controller.topMargin).toBeGreaterThan(0);
+      expect(paneRect.top).toBeCloseTo(triggerRect.top - controller.topMargin, 0.5);
 
       // Restore body to pre-test state.
       body.removeChild(superLongElement);