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

Author: emoralesb05

src/cdk/overlay/overlay-directives.ts

@@ -340,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.ts

@@ -466,10 +466,8 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
       return;
     }
 
-    /**
-     * Always set the trigger width since we need to
-     * update the panel with its new minWidth when opening it
-     */
+    // Always set the trigger width since we need to
+    // update the panel with its new minWidth when opening it
     this._setTriggerWidth();
 
     this._calculateOverlayPosition();