fix(overlay): re-use last preferred position when re-applying to open connected overlay

Currently when updating the position of an open connected overlay (e.g. when the user is scrolling) we go through the same process for determining the preferred position as when the overlay was attached. This means that the preferred position could change, causing the overlay to jump. With these changes the overlay will determine its preferred position when it's attached and the re-use the same position until it's detached. This is a prerequisite to moving the scroll clipping logic out of the `ConnectedPositionStrategy` and into the scroll strategies.

This PR is a resubmit of #5471.

Author: crisbeto

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

@@ -438,6 +438,28 @@ describe('ConnectedPositionStrategy', () => {
       expect(Math.floor(overlayRect.left)).toBe(Math.floor(originRect.left));
     });
 
+    it('should re-use the preferred position when re-applying while the overlay is open', () => {
+      positionBuilder = new OverlayPositionBuilder(viewportRuler);
+      strategy = positionBuilder.connectedTo(
+          fakeElementRef,
+          {originX: 'end', originY: 'center'},
+          {overlayX: 'start', overlayY: 'center'})
+          .withFallbackPosition(
+              {originX: 'start', originY: 'bottom'},
+              {overlayX: 'end', overlayY: 'top'});
+
+      const recalcSpy = spyOn(strategy, 'recalculateLastPosition');
+
+      strategy.attach(fakeOverlayRef(overlayElement));
+      strategy.apply();
+
+      expect(recalcSpy).not.toHaveBeenCalled();
+
+      strategy.apply();
+
+      expect(recalcSpy).toHaveBeenCalled();
+    });
+
     /**
      * Run all tests for connecting the overlay to the origin such that first preferred
      * position does not go off-screen. We do this because there are several cases where we

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

@@ -68,8 +68,10 @@ export class ConnectedPositionStrategy implements PositionStrategy {
   /** The last position to have been calculated as the best fit position. */
   private _lastConnectedPosition: ConnectionPositionPair;
 
-  _onPositionChange:
-      Subject<ConnectedOverlayPositionChange> = new Subject<ConnectedOverlayPositionChange>();
+  /** Whether the position strategy is currently applied. */
+  private _applied = false;
+
+  _onPositionChange = new Subject<ConnectedOverlayPositionChange>();
 
   /** Emits an event when the connection point changes. */
   get onPositionChange(): Observable<ConnectedOverlayPositionChange> {
@@ -99,22 +101,31 @@ export class ConnectedPositionStrategy implements PositionStrategy {
 
   /** Performs any cleanup after the element is destroyed. */
   dispose() {
+    this._applied = false;
     this._resizeSubscription.unsubscribe();
   }
 
   /** @docs-private */
   detach() {
+    this._applied = false;
     this._resizeSubscription.unsubscribe();
   }
 
   /**
    * Updates the position of the overlay element, using whichever preferred position relative
    * to the origin fits on-screen.
    * @docs-private
-   *
-   * @returns Resolves when the styles have been applied.
    */
   apply(): void {
+    // If the position has been applied already (e.g. when the overlay was opened), re-use the
+    // old position, in order to prevent the overlay from jumping around.
+    if (this._applied && this._lastConnectedPosition) {
+      this.recalculateLastPosition();
+      return;
+    }
+
+    this._applied = true;
+
     // We need the bounding rects for the origin and the overlay to determine how to position
     // the overlay relative to the origin.
     const element = this._pane;