fix(overlay): account for virtual keyboard offset on mobile devices

This is taking over from #11947. Fixes the connected overlay positioning being thrown off, if it is opened while an input is focused (e.g. when building an autocomplete component). The issue comes from the fact that the browser will offset the entire page in order to put the input in the middle and to make space for the virtual keyboard.

Fixes #6341.

Author: crisbeto

src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts

@@ -118,6 +118,39 @@ describe('FlexibleConnectedPositionStrategy', () => {
     document.body.removeChild(origin);
   });
 
+  it('should for the virtual keyboard offset when positioning the overlay', () => {
+    const originElement = createPositionedBlockElement();
+    document.body.appendChild(originElement);
+
+    // Position the element so it would have enough space to fit.
+    originElement.style.top = '200px';
+    originElement.style.left = '70px';
+
+    // Pull the element up ourselves to simulate what a mobile
+    // browser would do when the virtual keyboard is being shown.
+    overlayContainer.getContainerElement().style.top = '-100px';
+
+    attachOverlay({
+      positionStrategy: overlay.position()
+        .flexibleConnectedTo(originElement)
+        .withFlexibleDimensions(false)
+        .withPush(false)
+        .withPositions([{
+          originX: 'start',
+          originY: 'bottom',
+          overlayX: 'start',
+          overlayY: 'top'
+        }])
+    });
+
+    const originRect = originElement.getBoundingClientRect();
+    const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+
+    expect(Math.floor(overlayRect.top)).toBe(Math.floor(originRect.bottom));
+
+    document.body.removeChild(originElement);
+  });
+
   describe('without flexible dimensions and pushing', () => {
     const ORIGIN_HEIGHT = DEFAULT_HEIGHT;
     const ORIGIN_WIDTH = DEFAULT_WIDTH;

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -21,6 +21,7 @@ import {OverlayReference} from '../overlay-reference';
 import {isElementScrolledOutsideView, isElementClippedByScrolling} from './scroll-clip';
 import {coerceCssPixelValue} from '@angular/cdk/coercion';
 import {Platform} from '@angular/cdk/platform';
+import {OverlayContainer} from '../overlay-container';
 
 // TODO: refactor clipping detection into a separate thing (part of scrolling module)
 // TODO: doesn't handle both flexible width and height when it has to scroll along both axis.
@@ -131,8 +132,9 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     connectedTo: ElementRef | HTMLElement,
     private _viewportRuler: ViewportRuler,
     private _document: Document,
-    // @deletion-target 7.0.0 `_platform` parameter to be made required.
-    private _platform?: Platform) {
+    // @deletion-target 7.0.0 `_platform` and `_overlayContainer` parameters to be made required.
+    private _platform?: Platform,
+    private _overlayContainer?: OverlayContainer) {
     this.setOrigin(connectedTo);
   }
 
@@ -169,6 +171,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
    */
   apply(): void {
     // We shouldn't do anything if the strategy was disposed or we're on the server.
+    // @deletion-target 7.0.0 Remove `_platform` null check once it's guaranteed to be defined.
     if (this._isDisposed || (this._platform && !this._platform.isBrowser)) {
       return;
     }
@@ -839,6 +842,17 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
       overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect);
     }
 
+    // @deletion-target 7.0.0 Remove `_overlayContainer` null check
+    // once it's guaranteed to be defined.
+    let virtualKeyboardOffset = this._overlayContainer ?
+        this._overlayContainer.getContainerElement().getBoundingClientRect().top : 0;
+
+    // Normally this would be zero, however when the overlay is attached to an input (e.g. in an
+    // autocomplete), mobile browsers will shift everything in order to put the input in the middle
+    // of the screen and to make space for the virtual keyboard. We need to account for this offset,
+    // otherwise our positioning will be thrown off.
+    overlayPoint.y -= virtualKeyboardOffset;
+
     // We want to set either `top` or `bottom` based on whether the overlay wants to appear
     // above or below the origin and the direction in which the element will expand.
     if (position.overlayY === 'bottom') {

src/cdk/overlay/position/overlay-position-builder.ts

@@ -14,6 +14,7 @@ import {ConnectedPositionStrategy} from './connected-position-strategy';
 import {FlexibleConnectedPositionStrategy} from './flexible-connected-position-strategy';
 import {GlobalPositionStrategy} from './global-position-strategy';
 import {Platform} from '@angular/cdk/platform';
+import {OverlayContainer} from '../overlay-container';
 
 
 /** Builder for overlay position strategy. */
@@ -22,8 +23,9 @@ export class OverlayPositionBuilder {
   constructor(
     private _viewportRuler: ViewportRuler,
     @Inject(DOCUMENT) private _document: any,
-    // @deletion-target 7.0.0 `_platform` parameter to be made required.
-    @Optional() private _platform?: Platform) { }
+    // @deletion-target 7.0.0 `_platform` and `_overlayContainer` parameters to be made required.
+    @Optional() private _platform?: Platform,
+    @Optional() private _overlayContainer?: OverlayContainer) { }
 
   /**
    * Creates a global position strategy.
@@ -55,7 +57,7 @@ export class OverlayPositionBuilder {
    */
   flexibleConnectedTo(elementRef: ElementRef | HTMLElement): FlexibleConnectedPositionStrategy {
     return new FlexibleConnectedPositionStrategy(elementRef, this._viewportRuler, this._document,
-        this._platform);
+        this._platform, this._overlayContainer);
   }
 
 }