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

when changing the width of the md-select (e.g. using flex box) after its rendered, the template[cdk-connected-overlay] does not update its minWidth and keeps the initial minWidth every time its 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 */
@@ -340,6 +345,8 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
     this._position.withDirection(this.dir);
     this._overlayRef.getState().direction = this.dir;
     this._initEscapeListener();
+    /** Update the overlay size, in case the directive's inputs have changed */
+    this._configureSize(this._overlayRef.getState());
 
     if (!this._overlayRef.hasAttached()) {
       this._overlayRef.attach(this._templatePortal);

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,11 @@ 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();