fix(datepicker): calendar overlapping input when in a fallback position

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;

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
       );
   }
 

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>
 
       <!--

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;