fix(overlay): ConnectedOverlayDirective not updating positions after first open (#9579)

Fixes the `ConnectedOverlayDirective` not picking up changes to the `positions` after it is opened for the first time.

Author: crisbeto

src/cdk/overlay/overlay-directives.spec.ts

@@ -7,7 +7,10 @@ import {ESCAPE} from '@angular/cdk/keycodes';
 import {CdkConnectedOverlay, OverlayModule, CdkOverlayOrigin} from './index';
 import {OverlayContainer} from './overlay-container';
 import {ConnectedPositionStrategy} from './position/connected-position-strategy';
-import {ConnectedOverlayPositionChange} from './position/connected-position';
+import {
+  ConnectedOverlayPositionChange,
+  ConnectionPositionPair,
+} from './position/connected-position';
 
 
 describe('Overlay directives', () => {
@@ -268,6 +271,42 @@ describe('Overlay directives', () => {
       expect(Math.floor(triggerRect.bottom)).toBe(Math.floor(overlayRect.top));
     });
 
+    it('should update the positions if they change after init', () => {
+      const trigger = fixture.nativeElement.querySelector('#trigger');
+
+      trigger.style.position = 'fixed';
+      trigger.style.top = '200px';
+      trigger.style.left = '200px';
+
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      let triggerRect = trigger.getBoundingClientRect();
+      let overlayRect = getPaneElement().getBoundingClientRect();
+
+      expect(Math.floor(triggerRect.left)).toBe(Math.floor(overlayRect.left));
+      expect(Math.floor(triggerRect.bottom)).toBe(Math.floor(overlayRect.top));
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.positionOverrides = [{
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top'
+      }];
+
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      triggerRect = trigger.getBoundingClientRect();
+      overlayRect = getPaneElement().getBoundingClientRect();
+
+      expect(Math.floor(triggerRect.right)).toBe(Math.floor(overlayRect.left));
+      expect(Math.floor(triggerRect.bottom)).toBe(Math.floor(overlayRect.top));
+    });
+
   });
 
   describe('outputs', () => {
@@ -328,7 +367,8 @@ describe('Overlay directives', () => {
             [hasBackdrop]="hasBackdrop" backdropClass="mat-test-class"
             (backdropClick)="backdropClicked=true" [offsetX]="offsetX" [offsetY]="offsetY"
             (positionChange)="positionChangeHandler($event)" (attach)="attachHandler()"
-            (detach)="detachHandler()" [minWidth]="minWidth" [minHeight]="minHeight">
+            (detach)="detachHandler()" [minWidth]="minWidth" [minHeight]="minHeight"
+            [cdkConnectedOverlayPositions]="positionOverrides">
     <p>Menu content</p>
   </ng-template>`,
 })
@@ -348,6 +388,7 @@ class ConnectedOverlayDirectiveTest {
   hasBackdrop: boolean;
   backdropClicked = false;
   positionChangeHandler = jasmine.createSpy('positionChangeHandler');
+  positionOverrides: ConnectionPositionPair[];
   attachHandler = jasmine.createSpy('attachHandler').and.callFake(() => {
     this.attachResult =
         this.connectedOverlayDirective.overlayRef.overlayElement.querySelector('p') as HTMLElement;

src/cdk/overlay/overlay-directives.ts

@@ -292,11 +292,17 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if ((changes['origin'] || changes['_deprecatedOrigin']) && this._position) {
-      this._position.setOrigin(this.origin.elementRef);
+    if (this._position) {
+      if (changes['positions'] || changes['_deprecatedPositions']) {
+        this._position.withPositions(this.positions);
+      }
+
+      if (changes['origin'] || changes['_deprecatedOrigin']) {
+        this._position.setOrigin(this.origin.elementRef);
 
-      if (this.open) {
-        this._position.apply();
+        if (this.open) {
+          this._position.apply();
+        }
       }
     }
 
@@ -348,30 +354,25 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
 
   /** Returns the position strategy of the overlay to be set on the overlay config */
   private _createPositionStrategy(): ConnectedPositionStrategy {
-    const pos = this.positions[0];
-    const originPoint = {originX: pos.originX, originY: pos.originY};
-    const overlayPoint = {overlayX: pos.overlayX, overlayY: pos.overlayY};
-
+    const primaryPosition = this.positions[0];
+    const originPoint = {originX: primaryPosition.originX, originY: primaryPosition.originY};
+    const overlayPoint = {overlayX: primaryPosition.overlayX, overlayY: primaryPosition.overlayY};
     const strategy = this._overlay.position()
       .connectedTo(this.origin.elementRef, originPoint, overlayPoint)
       .withOffsetX(this.offsetX)
       .withOffsetY(this.offsetY);
 
-    this._handlePositionChanges(strategy);
-
-    return strategy;
-  }
-
-  private _handlePositionChanges(strategy: ConnectedPositionStrategy): void {
     for (let i = 1; i < this.positions.length; i++) {
       strategy.withFallbackPosition(
           {originX: this.positions[i].originX, originY: this.positions[i].originY},
           {overlayX: this.positions[i].overlayX, overlayY: this.positions[i].overlayY}
       );
     }
 
-    this._positionSubscription =
-        strategy.onPositionChange.subscribe(pos => this.positionChange.emit(pos));
+    this._positionSubscription = strategy.onPositionChange
+        .subscribe(pos => this.positionChange.emit(pos));
+
+    return strategy;
   }
 
   /** Attaches the overlay and subscribes to backdrop clicks if backdrop exists */