fix(input,cdk): a couple of server-side rendering errors (#5066)

angular · Jun 12, 2017 · 97e35df · 97e35df
1 parent f2de538
commit 97e35df
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/src/lib/core/observe-content/observe-content.ts b/src/lib/core/observe-content/observe-content.ts
@@ -19,7 +19,7 @@ import 'rxjs/add/operator/debounceTime';
 @Injectable()
 export class MdMutationObserverFactory {
   create(callback): MutationObserver {
-    return new MutationObserver(callback);
+    return typeof MutationObserver === 'undefined' ? null : new MutationObserver(callback);
   }
 }
 
@@ -59,11 +59,13 @@ export class ObserveContent implements AfterContentInit, OnDestroy {
       this._debouncer.next(mutations);
     });
 
-    this._observer.observe(this._elementRef.nativeElement, {
-      characterData: true,
-      childList: true,
-      subtree: true
-    });
+    if (this._observer) {
+      this._observer.observe(this._elementRef.nativeElement, {
+        characterData: true,
+        childList: true,
+        subtree: true
+      });
+    }
   }
 
   ngOnDestroy() {

diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts
@@ -20,7 +20,7 @@ import {
   Inject
 } from '@angular/core';
 import {animate, state, style, transition, trigger} from '@angular/animations';
-import {coerceBooleanProperty} from '../core';
+import {coerceBooleanProperty, Platform} from '../core';
 import {FormGroupDirective, NgControl, NgForm} from '@angular/forms';
 import {getSupportedInputTypes} from '../core/platform/features';
 import {
@@ -213,6 +213,7 @@ export class MdInputDirective {
 
   constructor(private _elementRef: ElementRef,
               private _renderer: Renderer2,
+              private _platform: Platform,
               @Optional() @Self() public _ngControl: NgControl,
               @Optional() private _parentForm: NgForm,
               @Optional() private _parentFormGroup: FormGroupDirective) {
@@ -267,7 +268,12 @@ export class MdInputDirective {
   /** Determines if the component host is a textarea. If not recognizable it returns false. */
   private _isTextarea() {
     let nativeElement = this._elementRef.nativeElement;
-    return nativeElement ? nativeElement.nodeName.toLowerCase() === 'textarea' : false;
+
+    // In Universal, we don't have access to `nodeName`, but the same can be achieved with `name`.
+    // Note that this shouldn't be necessary once Angular switches to an API that resembles the
+    // DOM closer.
+    let nodeName = this._platform.isBrowser ? nativeElement.nodeName : nativeElement.name;
+    return nodeName ? nodeName.toLowerCase() === 'textarea' : false;
   }
 }
 

diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html
@@ -86,7 +86,7 @@ <h2>Chips</h2>
 <h2>Datepicker</h2>
 
 <md-input-container>
-  <input mdInput [mdDatepicker]="birthday" placeholder="Birthday">
+  <input type="text" mdInput [mdDatepicker]="birthday" placeholder="Birthday">
   <button mdSuffix [mdDatepickerToggle]="birthday"></button>
   <md-datepicker #birthday></md-datepicker>
 </md-input-container>
@@ -106,7 +106,7 @@ <h2>Icon</h2>
 <h2>Input</h2>
 
 <md-input-container>
-  <input mdInput placeholder="amount">
+  <input type="number" mdInput placeholder="amount">
   <span mdPrefix>$&nbsp;</span>
   <span mdSuffix>.00</span>
   <md-hint>Dolla dolla bills</md-hint>