From 0ebc001940311be566469f1112862b300a89a1e1 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 28 Oct 2017 19:00:05 +0200
Subject: [PATCH] fix(datepicker): calendar overlapping input when in a
 fallback position

* Prevents datepickers that are in a fallback position from overlapping their input by adding an offset.
* Fixes some inconsistent brace spacing.
---
 src/lib/datepicker/datepicker-input.ts |  8 ++++++++
 src/lib/datepicker/datepicker.ts       | 14 ++++++++++----
 src/lib/form-field/form-field.html     |  2 +-
 src/lib/form-field/form-field.ts       |  1 +
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/lib/datepicker/datepicker-input.ts b/src/lib/datepicker/datepicker-input.ts
index f659cbce5cba..db0cfc8936e0 100644
--- a/src/lib/datepicker/datepicker-input.ts
+++ b/src/lib/datepicker/datepicker-input.ts
@@ -273,6 +273,14 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
     return this._formField ? this._formField.underlineRef : this._elementRef;
   }
 
+  /**
+   * Determines the offset to be used when the calendar goes into a fallback position.
+   * Primarily used to prevent the calendar from overlapping the input.
+   */
+  _getPopupFallbackOffset(): number {
+    return this._formField ? -this._formField._inputContainerRef.nativeElement.clientHeight : 0;
+  }
+
   // Implemented as part of ControlValueAccessor
   writeValue(value: D): void {
     this.value = value;
diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
index cc3bcbb5ec3b..ce19a27ece01 100644
--- a/src/lib/datepicker/datepicker.ts
+++ b/src/lib/datepicker/datepicker.ts
@@ -369,22 +369,28 @@ export class MatDatepicker<D> implements OnDestroy {
 
   /** Create the popup PositionStrategy. */
   private _createPopupPositionStrategy(): PositionStrategy {
+    const fallbackOffset = this._datepickerInput._getPopupFallbackOffset();
+
     return this._overlay.position()
       .connectedTo(this._datepickerInput.getPopupConnectionElementRef(),
         {originX: 'start', originY: 'bottom'},
         {overlayX: 'start', overlayY: 'top'}
       )
       .withFallbackPosition(
-        { originX: 'start', originY: 'top' },
-        { overlayX: 'start', overlayY: 'bottom' }
+        {originX: 'start', originY: 'top'},
+        {overlayX: 'start', overlayY: 'bottom'},
+        undefined,
+        fallbackOffset
       )
       .withFallbackPosition(
         {originX: 'end', originY: 'bottom'},
         {overlayX: 'end', overlayY: 'top'}
       )
       .withFallbackPosition(
-        { originX: 'end', originY: 'top' },
-        { overlayX: 'end', overlayY: 'bottom' }
+        {originX: 'end', originY: 'top'},
+        {overlayX: 'end', overlayY: 'bottom'},
+        undefined,
+        fallbackOffset
       );
   }
 
diff --git a/src/lib/form-field/form-field.html b/src/lib/form-field/form-field.html
index 9d928b19a5de..f5d6510eb74a 100644
--- a/src/lib/form-field/form-field.html
+++ b/src/lib/form-field/form-field.html
@@ -5,7 +5,7 @@
       <ng-content select="[matPrefix]"></ng-content>
     </div>
 
-    <div class="mat-input-infix mat-form-field-infix">
+    <div class="mat-input-infix mat-form-field-infix" #inputContainer>
       <ng-content></ng-content>
 
       <!--
diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts
index 6117e930cc23..5e75603f39ff 100644
--- a/src/lib/form-field/form-field.ts
+++ b/src/lib/form-field/form-field.ts
@@ -159,6 +159,7 @@ export class MatFormField implements AfterViewInit, AfterContentInit, AfterConte
   /** Reference to the form field's underline element. */
   @ViewChild('underline') underlineRef: ElementRef;
   @ViewChild('connectionContainer') _connectionContainerRef: ElementRef;
+  @ViewChild('inputContainer') _inputContainerRef: ElementRef;
   @ViewChild('label') private _label: ElementRef;
   @ContentChild(MatFormFieldControl) _control: MatFormFieldControl<any>;
   @ContentChild(MatPlaceholder) _placeholderChild: MatPlaceholder;