fix(overlay): clear last calculated position when new set of position…

…s is provided (#10462)

In the `FlexibleConnectedPositionStrategy` once we apply a position, we save a reference to it in order to be able to reuse it if the consumer wants to recalculate the overlay dimensions, however that cached position isn't being cleared. This means that if consumer were to provide a new set of positions and tried to re-apply the last calculated position, the cached position may no longer be a part of the list of preferred positions. These changes will clear the last position if it's not a part of the preferred positions anymore.

Relates to #10457.

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

@@ -31,7 +31,7 @@ import {FlexibleConnectedPositionStrategy} from './flexible-connected-position-s
  * a point on the origin element that is connected to a point on the overlay element. For example,
  * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner
  * of the overlay.
- * @deprecated
+ * @deprecated Use `FlexibleConnectedPositionStrategy` instead.
  * @deletion-target 7.0.0
  */
 export class ConnectedPositionStrategy implements PositionStrategy {

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

@@ -633,6 +633,45 @@ describe('FlexibleConnectedPositionStrategy', () => {
       expect(recalcSpy).toHaveBeenCalled();
     });
 
+    it('should not retain the last preferred position when overriding the positions', () => {
+      originElement.style.top = '100px';
+      originElement.style.left = '100px';
+
+      const originRect = originElement.getBoundingClientRect();
+
+      positionStrategy.withPositions([{
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetX: 10,
+        offsetY: 20
+      }]);
+
+      attachOverlay({positionStrategy});
+
+      let overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+
+      expect(Math.floor(overlayRect.top)).toBe(Math.floor(originRect.top) + 20);
+      expect(Math.floor(overlayRect.left)).toBe(Math.floor(originRect.left) + 10);
+
+      positionStrategy.withPositions([{
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetX: 20,
+        offsetY: 40
+      }]);
+
+      positionStrategy.reapplyLastPosition();
+
+      overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+
+      expect(Math.floor(overlayRect.top)).toBe(Math.floor(originRect.top) + 40);
+      expect(Math.floor(overlayRect.left)).toBe(Math.floor(originRect.left) + 20);
+    });
+
     /**
      * 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/flexible-connected-position-strategy.ts

@@ -95,7 +95,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   private _boundingBox: HTMLElement | null;
 
   /** The last position to have been calculated as the best fit position. */
-  private _lastPosition: ConnectedPosition;
+  private _lastPosition: ConnectedPosition | null;
 
   /** Subject that emits whenever the position changes. */
   private _positionChanges = new Subject<ConnectedOverlayPositionChange>();
@@ -305,6 +305,13 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
    */
   withPositions(positions: ConnectedPosition[]): this {
     this._preferredPositions = positions;
+
+    // If the last calculated position object isn't part of the positions anymore, clear
+    // it in order to avoid it being picked up if the consumer tries to re-apply.
+    if (positions.indexOf(this._lastPosition!) === -1) {
+      this._lastPosition = null;
+    }
+
     return this;
   }
 

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

@@ -34,6 +34,8 @@ export class OverlayPositionBuilder {
    * @param elementRef
    * @param originPos
    * @param overlayPos
+   * @deprecated Use `flexibleConnectedTo` instead.
+   * @deletion-target 7.0.0
    */
   connectedTo(
       elementRef: ElementRef,

src/lib/select/select.html

@@ -15,11 +15,10 @@
   <div class="mat-select-arrow-wrapper"><div class="mat-select-arrow"></div></div>
 </div>
 
-<!-- TODO(crisbeto): re-enable locked position after flexible positioning gets in. -->
 <ng-template
   cdk-connected-overlay
-  cdkConnectedOverlayHasBackdrop
   cdkConnectedOverlayLockPosition
+  cdkConnectedOverlayHasBackdrop
   cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
   [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
   [cdkConnectedOverlayOrigin]="origin"