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

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

@@ -107,6 +107,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', () => {
@@ -116,6 +125,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', () => {
@@ -125,6 +143,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', () => {
@@ -134,6 +161,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/lib/core/overlay/overlay-directives.ts

@@ -185,6 +185,22 @@ export class ConnectedOverlayDirective implements OnDestroy {
   private _buildConfig(): OverlayState {
     let overlayConfig = new OverlayState();
 
+    this._configureState(overlayConfig);
+
+    overlayConfig.hasBackdrop = this.hasBackdrop;
+
+    if (this.backdropClass) {
+      overlayConfig.backdropClass = this.backdropClass;
+    }
+
+    this._position = this._createPositionStrategy() as ConnectedPositionStrategy;
+    overlayConfig.positionStrategy = this._position;
+
+    return overlayConfig;
+  }
+
+  /** Configure the overlay state based on the directive's inputs */
+  private _configureState(overlayConfig: OverlayState): void {
     if (this.width || this.width === 0) {
       overlayConfig.width = this.width;
     }
@@ -200,17 +216,6 @@ export class ConnectedOverlayDirective implements OnDestroy {
     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;
-
-    return overlayConfig;
   }
 
   /** Returns the position strategy of the overlay to be set on the overlay config */
@@ -249,6 +254,8 @@ export class ConnectedOverlayDirective implements OnDestroy {
 
     this._position.withDirection(this.dir);
     this._overlayRef.getState().direction = this.dir;
+    /** Update the overlay state, in case the directive's inputs have changed */
+    this._configureState(this._overlayRef.getState());
 
     if (!this._overlayRef.hasAttached()) {
       this._overlayRef.attach(this._templatePortal);

src/lib/select/select.spec.ts

@@ -11,7 +11,9 @@ import {
 } from '@angular/core';
 import {MdSelectModule} from './index';
 import {OverlayContainer} from '../core/overlay/overlay-container';
-import {MdSelect, MdSelectFloatPlaceholderType} from './select';
+import {
+  MdSelect, MdSelectFloatPlaceholderType, SELECT_MULTIPLE_PANEL_PADDING_X, SELECT_PANEL_PADDING_X
+} from './select';
 import {MdSelectDynamicMultipleError, MdSelectNonArrayValueError} from './select-errors';
 import {MdOption} from '../core/option/option';
 import {Dir} from '../core/rtl/dir';
@@ -151,7 +153,7 @@ describe('MdSelect', () => {
         trigger.click();
         fixture.detectChanges();
         const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
-        expect(pane.style.minWidth).toBe('200px');
+        expect(pane.style.minWidth).toBe((200 + SELECT_PANEL_PADDING_X) + 'px');
       });
     }));
 
@@ -1302,7 +1304,7 @@ describe('MdSelect', () => {
         fixture.detectChanges();
 
         const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
-        expect(pane.style.minWidth).toEqual('300px');
+        expect(pane.style.minWidth).toEqual((300 + SELECT_PANEL_PADDING_X) + 'px');
 
         expect(fixture.componentInstance.select.panelOpen).toBe(true);
         expect(overlayContainerElement.textContent).toContain('Steak');
@@ -1593,6 +1595,17 @@ describe('MdSelect', () => {
       });
     }));
 
+    it('should set the width of the overlay based on the trigger', async(() => {
+      trigger.style.width = '200px';
+
+      fixture.whenStable().then(() => {
+        trigger.click();
+        fixture.detectChanges();
+        const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+        expect(pane.style.minWidth).toBe((200 + SELECT_MULTIPLE_PANEL_PADDING_X) + 'px');
+      });
+    }));
+
   });
 
 });

src/lib/select/select.ts

@@ -342,6 +342,11 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
       return;
     }
     this._calculateOverlayPosition();
+    /**
+     * Update the trigger width, in case the select width has changed
+     * Taking into account the "offsetX"/"dir" to fit it better.
+     */
+    this._triggerWidth = this._getWidth() + (this._offsetX * (!this._isRtl() ? -1 : 1));
     this._placeholderState = this._floatPlaceholderState();
     this._panelOpen = true;
   }