From 2388d91642593fbbed423035a459e7c92520eb37 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 28 Jul 2017 17:48:34 +0300
Subject: [PATCH] fix(select): server-side rendering error with preselected
 value (#6049)

Fixes a server-side rendering error in `md-select` if it has a preselected value, in addition to one in the `md-option` component.

Fixes #6045.
---
 src/lib/core/option/option.ts                    |  6 +++++-
 src/lib/select/select.ts                         | 13 ++++++++++++-
 src/universal-app/kitchen-sink/kitchen-sink.html |  8 ++++----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/lib/core/option/option.ts b/src/lib/core/option/option.ts
index d04288e760d..e09955c86cf 100644
--- a/src/lib/core/option/option.ts
+++ b/src/lib/core/option/option.ts
@@ -146,7 +146,11 @@ export class MdOption extends _MdOptionMixinBase implements CanDisableRipple {
 
   /** Sets focus onto this option. */
   focus(): void {
-    this._getHostElement().focus();
+    const element = this._getHostElement();
+
+    if ('focus' in element) {
+      element.focus();
+    }
   }
 
   /**
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index e9fd301effb..446e8a13129 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -56,6 +56,7 @@ import {
 // considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953)
 // tslint:disable-next-line:no-unused-variable
 import {ScrollStrategy, RepositionScrollStrategy} from '../core/overlay/scroll';
+import {Platform} from '@angular/cdk/platform';
 
 /**
  * The following style constants are necessary to save here in order
@@ -111,6 +112,13 @@ export const SELECT_PANEL_PADDING_Y = 16;
  */
 export const SELECT_PANEL_VIEWPORT_PADDING = 8;
 
+/**
+ * Default minimum width of the trigger based on the CSS.
+ * Used as a fallback for server-side rendering.
+ * @docs-private
+ */
+const SELECT_TRIGGER_MIN_WIDTH = 112;
+
 /** Injection token that determines the scroll handling while a select is open. */
 export const MD_SELECT_SCROLL_STRATEGY =
     new InjectionToken<() => ScrollStrategy>('md-select-scroll-strategy');
@@ -367,6 +375,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
     private _viewportRuler: ViewportRuler,
     private _changeDetectorRef: ChangeDetectorRef,
     private _overlay: Overlay,
+    private _platform: Platform,
     renderer: Renderer2,
     elementRef: ElementRef,
     @Optional() private _dir: Directionality,
@@ -534,7 +543,9 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
    * the overlay width to the trigger width.
    */
   private _setTriggerWidth(): void {
-    this._triggerWidth = this._getTriggerRect().width;
+    this._triggerWidth = this._platform.isBrowser ? this._getTriggerRect().width :
+        SELECT_TRIGGER_MIN_WIDTH;
+
     this._changeDetectorRef.markForCheck();
   }
 
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html
index f1ed4e7e2b5..307e1fd96da 100644
--- a/src/universal-app/kitchen-sink/kitchen-sink.html
+++ b/src/universal-app/kitchen-sink/kitchen-sink.html
@@ -159,10 +159,10 @@
 <md-radio-button name="onions" disabled>Red</md-radio-button>
 
 <h2>Select</h2>
-<md-select>
-  <md-option>Glass</md-option>
-  <md-option>Ceramic</md-option>
-  <md-option>Steel</md-option>
+<md-select value="ceramic">
+  <md-option value="glass">Glass</md-option>
+  <md-option value="ceramic">Ceramic</md-option>
+  <md-option value="steel">Steel</md-option>
 </md-select>
 
 <h2>Sidenav</h2>