feat(select): update the trigger width when select is opened

Author: emoralesb05

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

@@ -135,6 +135,15 @@ describe('Overlay directives', () => {
 
       const pane = overlayContainerElement.children[0] as HTMLElement;
       expect(pane.style.width).toEqual('250px');
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.width = 500;
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(pane.style.width).toEqual('500px');
     });
 
     it('should set the height', () => {
@@ -144,6 +153,15 @@ describe('Overlay directives', () => {
 
       const pane = overlayContainerElement.children[0] as HTMLElement;
       expect(pane.style.height).toEqual('100vh');
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.height = '50vh';
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(pane.style.height).toEqual('50vh');
     });
 
     it('should set the min width', () => {
@@ -153,6 +171,15 @@ describe('Overlay directives', () => {
 
       const pane = overlayContainerElement.children[0] as HTMLElement;
       expect(pane.style.minWidth).toEqual('250px');
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.minWidth = 500;
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(pane.style.minWidth).toEqual('500px');
     });
 
     it('should set the min height', () => {
@@ -162,6 +189,15 @@ describe('Overlay directives', () => {
 
       const pane = overlayContainerElement.children[0] as HTMLElement;
       expect(pane.style.minHeight).toEqual('500px');
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.minHeight = 500;
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(pane.style.minHeight).toEqual('500px');
     });
 
     it('should create the backdrop if designated', () => {

src/cdk/overlay/overlay-directives.ts

@@ -274,6 +274,23 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
   private _buildConfig(): OverlayState {
     let overlayConfig = new OverlayState();
 
+    this._configureSize(overlayConfig);
+
+    overlayConfig.hasBackdrop = this.hasBackdrop;
+
+    if (this.backdropClass) {
+      overlayConfig.backdropClass = this.backdropClass;
+    }
+
+    this._position = this._createPositionStrategy() as ConnectedPositionStrategy;
+    overlayConfig.positionStrategy = this._position;
+    overlayConfig.scrollStrategy = this.scrollStrategy;
+
+    return overlayConfig;
+  }
+
+  /** Configure the overlay size based on the directive's inputs */
+  private _configureSize(overlayConfig: OverlayState): void {
     if (this.width || this.width === 0) {
       overlayConfig.width = this.width;
     }
@@ -289,18 +306,6 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
     if (this.minHeight || this.minHeight === 0) {
       overlayConfig.minHeight = this.minHeight;
     }
-
-    overlayConfig.hasBackdrop = this.hasBackdrop;
-
-    if (this.backdropClass) {
-      overlayConfig.backdropClass = this.backdropClass;
-    }
-
-    this._position = this._createPositionStrategy() as ConnectedPositionStrategy;
-    overlayConfig.positionStrategy = this._position;
-    overlayConfig.scrollStrategy = this.scrollStrategy;
-
-    return overlayConfig;
   }
 
   /** Returns the position strategy of the overlay to be set on the overlay config */
@@ -335,6 +340,11 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
   private _attachOverlay() {
     if (!this._overlayRef) {
       this._createOverlay();
+    } else {
+      // Update the overlay size, in case the directive's inputs have changed
+      const overlayState = new OverlayState();
+      this._configureSize(overlayState);
+      this._overlayRef.updateSize(overlayState);
     }
 
     this._position.withDirection(this.dir);

src/cdk/overlay/overlay-ref.ts

@@ -47,7 +47,7 @@ export class OverlayRef implements PortalHost {
 
     // Update the pane element with the given state configuration.
     this._updateStackingOrder();
-    this.updateSize();
+    this._setSizeStyles();
     this.updateDirection();
     this.updatePosition();
     this._state.scrollStrategy.enable();
@@ -155,8 +155,29 @@ export class OverlayRef implements PortalHost {
     this._pane.setAttribute('dir', this._state.direction!);
   }
 
+  /** Updates the state size of the overlay */
+  updateSize(state: OverlayState) {
+    if (state.width || state.width === 0) {
+      this._state.width = state.width;
+    }
+
+    if (state.height || state.height === 0) {
+      this._state.height = state.height;
+    }
+
+    if (state.minWidth || state.minWidth === 0) {
+      this._state.minWidth = state.minWidth;
+    }
+
+    if (state.minHeight || state.minHeight === 0) {
+      this._state.minHeight = state.minHeight;
+    }
+
+    this._setSizeStyles();
+  }
+
   /** Updates the size of the overlay based on the overlay config. */
-  updateSize() {
+  private _setSizeStyles() {
     if (this._state.width || this._state.width === 0) {
       this._pane.style.width = formatCssUnit(this._state.width);
     }

src/lib/autocomplete/autocomplete-trigger.ts

@@ -176,9 +176,10 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     if (!this._overlayRef) {
       this._createOverlay();
     } else {
-      /** Update the panel width, in case the host width has changed */
-      this._overlayRef.getState().width = this._getHostWidth();
-      this._overlayRef.updateSize();
+      // Update the panel width, in case the host width has changed
+      const overlayState = new OverlayState();
+      overlayState.width = this._getHostWidth();
+      this._overlayRef.updateSize(overlayState);
     }
 
     if (this._overlayRef && !this._overlayRef.hasAttached()) {

src/lib/select/select.spec.ts

@@ -2478,6 +2478,34 @@ describe('MdSelect', () => {
       });
     }));
 
+    it('should set the width of the overlay based on the trigger and resize', async(() => {
+      trigger.style.width = '200px';
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        trigger.click();
+        fixture.detectChanges();
+        const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+        expect(pane.style.minWidth).toBe('200px',
+            'Expected pane minWidth to be 200px initially');
+
+        const backdrop =
+            overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+        backdrop.click();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+
+          trigger.style.width = '400px';
+          fixture.detectChanges();
+          fixture.whenStable().then(() => {
+            trigger.click();
+            fixture.detectChanges();
+            expect(pane.style.minWidth).toBe('400px',
+                'Expected pane minWidth to be 400px after resize');
+          });
+        });
+      });
+    }));
+
   });
 
   describe('theming', () => {

src/lib/select/select.ts

@@ -466,9 +466,9 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
       return;
     }
 
-    if (!this._triggerWidth) {
-      this._setTriggerWidth();
-    }
+    // Always set the trigger width since we need to
+    // update the panel with its new minWidth when opening it
+    this._setTriggerWidth();
 
     this._calculateOverlayPosition();
     this._placeholderState = this._floatPlaceholderState();