Skip to content

Commit ba20454

Browse files
committed
fix(input,cdk): a couple of server-side rendering errors
* Fixes an error that is thrown during server-side rendering if an input has a `type`. * Fixes an error that was being thrown by the `cdkObserveContent` due to the lack of a `MutationObserver`.
1 parent c2816ef commit ba20454

File tree

3 files changed

+15
-10
lines changed

3 files changed

+15
-10
lines changed

src/lib/core/observe-content/observe-content.ts

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
AfterContentInit,
1010
Injectable,
1111
} from '@angular/core';
12+
import {Platform} from '../platform/platform';
1213
import {Subject} from 'rxjs/Subject';
1314
import 'rxjs/add/operator/debounceTime';
1415

@@ -19,7 +20,7 @@ import 'rxjs/add/operator/debounceTime';
1920
@Injectable()
2021
export class MdMutationObserverFactory {
2122
create(callback): MutationObserver {
22-
return new MutationObserver(callback);
23+
return typeof MutationObserver === 'undefined' ? null : new MutationObserver(callback);
2324
}
2425
}
2526

@@ -59,11 +60,13 @@ export class ObserveContent implements AfterContentInit, OnDestroy {
5960
this._debouncer.next(mutations);
6061
});
6162

62-
this._observer.observe(this._elementRef.nativeElement, {
63-
characterData: true,
64-
childList: true,
65-
subtree: true
66-
});
63+
if (this._observer) {
64+
this._observer.observe(this._elementRef.nativeElement, {
65+
characterData: true,
66+
childList: true,
67+
subtree: true
68+
});
69+
}
6770
}
6871

6972
ngOnDestroy() {

src/lib/input/input-container.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
Inject
2121
} from '@angular/core';
2222
import {animate, state, style, transition, trigger} from '@angular/animations';
23-
import {coerceBooleanProperty} from '../core';
23+
import {coerceBooleanProperty, Platform} from '../core';
2424
import {FormGroupDirective, NgControl, NgForm} from '@angular/forms';
2525
import {getSupportedInputTypes} from '../core/platform/features';
2626
import {
@@ -213,6 +213,7 @@ export class MdInputDirective {
213213

214214
constructor(private _elementRef: ElementRef,
215215
private _renderer: Renderer2,
216+
private _platform: Platform,
216217
@Optional() @Self() public _ngControl: NgControl,
217218
@Optional() private _parentForm: NgForm,
218219
@Optional() private _parentFormGroup: FormGroupDirective) {
@@ -267,7 +268,8 @@ export class MdInputDirective {
267268
/** Determines if the component host is a textarea. If not recognizable it returns false. */
268269
private _isTextarea() {
269270
let nativeElement = this._elementRef.nativeElement;
270-
return nativeElement ? nativeElement.nodeName.toLowerCase() === 'textarea' : false;
271+
let nodeName = this._platform.isBrowser ? nativeElement.nodeName : nativeElement.name;
272+
return nodeName ? nodeName.toLowerCase() === 'textarea' : false;
271273
}
272274
}
273275

src/universal-app/kitchen-sink/kitchen-sink.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ <h2>Chips</h2>
8686
<h2>Datepicker</h2>
8787

8888
<md-input-container>
89-
<input mdInput [mdDatepicker]="birthday" placeholder="Birthday">
89+
<input type="text" mdInput [mdDatepicker]="birthday" placeholder="Birthday">
9090
<button mdSuffix [mdDatepickerToggle]="birthday"></button>
9191
<md-datepicker #birthday></md-datepicker>
9292
</md-input-container>
@@ -106,7 +106,7 @@ <h2>Icon</h2>
106106
<h2>Input</h2>
107107

108108
<md-input-container>
109-
<input mdInput placeholder="amount">
109+
<input type="number" mdInput placeholder="amount">
110110
<span mdPrefix>$&nbsp;</span>
111111
<span mdSuffix>.00</span>
112112
<md-hint>Dolla dolla bills</md-hint>

0 commit comments

Comments
 (0)