fix(overlay-directives): update offsets if they change after overlay creation (#1981)

Author: kara

src/lib/core/overlay/overlay-directives.spec.ts

@@ -119,10 +119,21 @@ describe('Overlay directives', () => {
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
-      // expected x value is the starting x + offset x
-      const expectedX = startX + 5;
       const pane = overlayContainerElement.children[0] as HTMLElement;
-      expect(pane.style.transform).toContain(`translateX(${expectedX}px)`);
+      expect(pane.style.transform)
+          .toContain(`translateX(${startX + 5}px)`,
+              `Expected overlay translateX to equal the original X + the offsetX.`);
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.offsetX = 15;
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(pane.style.transform)
+          .toContain(`translateX(${startX + 15}px)`,
+              `Expected overlay directive to reflect new offsetX if it changes.`);
     });
 
     it('should set the offsetY', () => {
@@ -138,7 +149,19 @@ describe('Overlay directives', () => {
       // expected y value is the starting y + trigger height + offset y
       // 30 + 20 + 45 = 95px
       const pane = overlayContainerElement.children[0] as HTMLElement;
-      expect(pane.style.transform).toContain(`translateY(95px)`);
+      expect(pane.style.transform)
+          .toContain(`translateY(95px)`,
+              `Expected overlay translateY to equal the start Y + height + offsetY.`);
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.offsetY = 55;
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+      expect(pane.style.transform)
+          .toContain(`translateY(105px)`,
+              `Expected overlay directive to reflect new offsetY if it changes.`);
     });
 
   });

src/lib/core/overlay/overlay-directives.ts

@@ -67,15 +67,38 @@ export class ConnectedOverlayDirective implements OnDestroy {
   private _hasBackdrop = false;
   private _backdropSubscription: Subscription;
   private _positionSubscription: Subscription;
+  private _offsetX: number = 0;
+  private _offsetY: number = 0;
+  private _position: ConnectedPositionStrategy;
 
   @Input() origin: OverlayOrigin;
   @Input() positions: ConnectionPositionPair[];
 
   /** The offset in pixels for the overlay connection point on the x-axis */
-  @Input() offsetX: number = 0;
+  @Input()
+  get offsetX(): number {
+    return this._offsetX;
+  }
+
+  set offsetX(offsetX: number) {
+    this._offsetX = offsetX;
+    if (this._position) {
+      this._position.withOffsetX(offsetX);
+    }
+  }
 
   /** The offset in pixels for the overlay connection point on the y-axis */
-  @Input() offsetY: number = 0;
+  @Input()
+  get offsetY() {
+    return this._offsetY;
+  }
+
+  set offsetY(offsetY: number) {
+    this._offsetY = offsetY;
+    if (this._position) {
+      this._position.withOffsetY(offsetY);
+    }
+  }
 
   /** The width of the overlay panel. */
   @Input() width: number | string;
@@ -163,7 +186,8 @@ export class ConnectedOverlayDirective implements OnDestroy {
       overlayConfig.backdropClass = this.backdropClass;
     }
 
-    overlayConfig.positionStrategy = this._createPositionStrategy();
+    this._position = this._createPositionStrategy() as ConnectedPositionStrategy;
+    overlayConfig.positionStrategy = this._position;
 
     overlayConfig.direction = this.dir;