Skip to content

Commit b9b4da0

Browse files
committed
chore(input): switch to OnPush change detection
Switches the `MdInputContainer` to `OnPush` change detection and sorts out the various change detection-related issues. Relates to #5035.
1 parent da1d1ca commit b9b4da0

File tree

1 file changed

+104
-53
lines changed

1 file changed

+104
-53
lines changed

src/lib/input/input-container.ts

Lines changed: 104 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,11 @@ import {
2525
Self,
2626
ViewChild,
2727
ViewEncapsulation,
28-
Inject
28+
Inject,
29+
ChangeDetectionStrategy,
30+
OnChanges,
31+
OnDestroy,
32+
DoCheck,
2933
} from '@angular/core';
3034
import {animate, state, style, transition, trigger} from '@angular/animations';
3135
import {coerceBooleanProperty, Platform} from '../core';
@@ -48,6 +52,8 @@ import {
4852
ErrorOptions,
4953
MD_ERROR_GLOBAL_OPTIONS
5054
} from '../core/error/error-options';
55+
import {Subject} from 'rxjs/Subject';
56+
import {filter} from '../core/rxjs/index';
5157

5258
// Invalid input type. Using one of these will throw an MdInputContainerUnsupportedTypeError.
5359
const MD_INPUT_INVALID_TYPES = [
@@ -128,53 +134,48 @@ export class MdSuffix {}
128134
'[disabled]': 'disabled',
129135
'[required]': 'required',
130136
'[attr.aria-describedby]': 'ariaDescribedby || null',
131-
'[attr.aria-invalid]': '_isErrorState()',
132-
'(blur)': '_onBlur()',
133-
'(focus)': '_onFocus()',
137+
'[attr.aria-invalid]': '_isErrorState',
138+
'(blur)': '_focusChanged(false)',
139+
'(focus)': '_focusChanged(true)',
134140
'(input)': '_onInput()',
135141
}
136142
})
137-
export class MdInputDirective {
143+
export class MdInputDirective implements OnChanges, OnDestroy, DoCheck {
138144

139145
/** Variables used as cache for getters and setters. */
140146
private _type = 'text';
141147
private _placeholder: string = '';
142148
private _disabled = false;
143149
private _required = false;
144150
private _id: string;
145-
private _cachedUid: string;
151+
private _uid = `md-input-${nextUniqueId++}`;
146152
private _errorOptions: ErrorOptions;
153+
private _previousNativeValue = this.value;
154+
155+
/** Whether the input is in an error state. */
156+
_isErrorState = false;
147157

148158
/** Whether the element is focused or not. */
149159
focused = false;
150160

151161
/** Sets the aria-describedby attribute on the input for improved a11y. */
152162
ariaDescribedby: string;
153163

164+
/** Stream that emits whenever one of the input states changes. */
165+
_stateChanges = new Subject<void>();
166+
154167
/** Whether the element is disabled. */
155168
@Input()
156-
get disabled() {
157-
return this._ngControl ? this._ngControl.disabled : this._disabled;
158-
}
159-
160-
set disabled(value: any) {
161-
this._disabled = coerceBooleanProperty(value);
162-
}
169+
get disabled() { return this._ngControl ? this._ngControl.disabled : this._disabled; }
170+
set disabled(value: any) { this._disabled = coerceBooleanProperty(value); }
163171

164172
/** Unique id of the element. */
165173
@Input()
166174
get id() { return this._id; }
167-
set id(value: string) {this._id = value || this._uid; }
175+
set id(value: string) { this._id = value || this._uid; }
168176

169177
/** Placeholder attribute of the element. */
170-
@Input()
171-
get placeholder() { return this._placeholder; }
172-
set placeholder(value: string) {
173-
if (this._placeholder !== value) {
174-
this._placeholder = value;
175-
this._placeholderChange.emit(this._placeholder);
176-
}
177-
}
178+
@Input() placeholder: string = '';
178179

179180
/** Whether the element is required. */
180181
@Input()
@@ -203,11 +204,6 @@ export class MdInputDirective {
203204
get value() { return this._elementRef.nativeElement.value; }
204205
set value(value: string) { this._elementRef.nativeElement.value = value; }
205206

206-
/**
207-
* Emits an event when the placeholder changes so that the `md-input-container` can re-validate.
208-
*/
209-
@Output() _placeholderChange = new EventEmitter<string>();
210-
211207
/** Whether the input is empty. */
212208
get empty() {
213209
return !this._isNeverEmpty() &&
@@ -218,8 +214,6 @@ export class MdInputDirective {
218214
!this._isBadInput();
219215
}
220216

221-
private get _uid() { return this._cachedUid = this._cachedUid || `md-input-${nextUniqueId++}`; }
222-
223217
private _neverEmptyInputTypes = [
224218
'date',
225219
'datetime',
@@ -232,24 +226,51 @@ export class MdInputDirective {
232226
constructor(private _elementRef: ElementRef,
233227
private _renderer: Renderer2,
234228
private _platform: Platform,
229+
private _changeDetectorRef: ChangeDetectorRef,
235230
@Optional() @Self() public _ngControl: NgControl,
236231
@Optional() private _parentForm: NgForm,
237232
@Optional() private _parentFormGroup: FormGroupDirective,
238233
@Optional() @Inject(MD_ERROR_GLOBAL_OPTIONS) errorOptions: ErrorOptions) {
239234

240235
// Force setter to be called in case id was not specified.
241236
this.id = this.id;
242-
243237
this._errorOptions = errorOptions ? errorOptions : {};
244238
this.errorStateMatcher = this._errorOptions.errorStateMatcher || defaultErrorStateMatcher;
245239
}
246240

247-
/** Focuses the input element. */
248-
focus() { this._elementRef.nativeElement.focus(); }
241+
ngOnChanges() {
242+
this._stateChanges.next();
243+
}
249244

250-
_onFocus() { this.focused = true; }
245+
ngOnDestroy() {
246+
this._stateChanges.complete();
247+
}
251248

252-
_onBlur() { this.focused = false; }
249+
ngDoCheck() {
250+
if (this._ngControl) {
251+
// We need to re-evaluate this on every change detection cycle, because there are some
252+
// error triggers that we can't subscribe to (e.g. parent form submissions). This means
253+
// that whatever logic is in here has to be super lean or we risk destroying the performance.
254+
this._updateErrorState();
255+
} else {
256+
// When the input isn't used together with `@angular/forms`, we need to check manually for
257+
// changes to the native `value` property in order to update the floating label.
258+
this._dirtyCheckNativeValue();
259+
}
260+
}
261+
262+
/** Focuses the input element. */
263+
focus() {
264+
this._elementRef.nativeElement.focus();
265+
}
266+
267+
/** Callback for the cases where the focused state of the input changes. */
268+
_focusChanged(isFocused: boolean) {
269+
if (isFocused !== this.focused) {
270+
this.focused = isFocused;
271+
this._stateChanges.next();
272+
}
273+
}
253274

254275
_onInput() {
255276
// This is a noop function and is used to let Angular know whenever the value changes.
@@ -261,22 +282,42 @@ export class MdInputDirective {
261282
// FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.
262283
}
263284

264-
/** Whether the input is in an error state. */
265-
_isErrorState(): boolean {
285+
/** Re-evaluates the error state. This is only relevant with @angular/forms. */
286+
private _updateErrorState() {
287+
const oldState = this._isErrorState;
266288
const control = this._ngControl;
267-
const form = this._parentFormGroup || this._parentForm;
268-
return control && this.errorStateMatcher(control.control as FormControl, form);
289+
const parent = this._parentFormGroup || this._parentForm;
290+
const newState = control && this.errorStateMatcher(control.control as FormControl, parent);
291+
292+
if (newState !== oldState) {
293+
this._isErrorState = newState;
294+
this._stateChanges.next();
295+
}
296+
}
297+
298+
/** Does some manual dirty checking on the native input `value` property. */
299+
private _dirtyCheckNativeValue() {
300+
const newValue = this.value;
301+
302+
if (this._previousNativeValue !== newValue) {
303+
this._previousNativeValue = newValue;
304+
this._stateChanges.next();
305+
}
269306
}
270307

271308
/** Make sure the input is a supported type. */
272309
private _validateType() {
273-
if (MD_INPUT_INVALID_TYPES.indexOf(this._type) !== -1) {
310+
if (MD_INPUT_INVALID_TYPES.indexOf(this._type) > -1) {
274311
throw getMdInputContainerUnsupportedTypeError(this._type);
275312
}
276313
}
277314

278-
private _isNeverEmpty() { return this._neverEmptyInputTypes.indexOf(this._type) !== -1; }
315+
/** Checks whether the input type isn't one of the types that are never empty. */
316+
private _isNeverEmpty() {
317+
return this._neverEmptyInputTypes.indexOf(this._type) > -1;
318+
}
279319

320+
/** Checks whether the input is invalid based on the native validation. */
280321
private _isBadInput() {
281322
// The `validity` property won't be present on platform-server.
282323
let validity = (this._elementRef.nativeElement as HTMLInputElement).validity;
@@ -317,7 +358,7 @@ export class MdInputDirective {
317358
// Remove align attribute to prevent it from interfering with layout.
318359
'[attr.align]': 'null',
319360
'class': 'mat-input-container',
320-
'[class.mat-input-invalid]': '_mdInputChild._isErrorState()',
361+
'[class.mat-input-invalid]': '_mdInputChild._isErrorState',
321362
'[class.mat-focused]': '_mdInputChild.focused',
322363
'[class.ng-untouched]': '_shouldForward("untouched")',
323364
'[class.ng-touched]': '_shouldForward("touched")',
@@ -329,6 +370,7 @@ export class MdInputDirective {
329370
'(click)': '_focusInput()',
330371
},
331372
encapsulation: ViewEncapsulation.None,
373+
changeDetection: ChangeDetectionStrategy.OnPush,
332374
})
333375

334376
export class MdInputContainer implements AfterViewInit, AfterContentInit, AfterContentChecked {
@@ -337,7 +379,7 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit, AfterC
337379
/** Color of the input divider, based on the theme. */
338380
@Input() color: 'primary' | 'accent' | 'warn' = 'primary';
339381

340-
/** @deprecated Use color instead. */
382+
/** @deprecated Use `color` instead. */
341383
@Input()
342384
get dividerColor() { return this.color; }
343385
set dividerColor(value) { this.color = value; }
@@ -381,17 +423,11 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit, AfterC
381423

382424
/** Reference to the input's underline element. */
383425
@ViewChild('underline') underlineRef: ElementRef;
384-
385426
@ContentChild(MdInputDirective) _mdInputChild: MdInputDirective;
386-
387427
@ContentChild(MdPlaceholder) _placeholderChild: MdPlaceholder;
388-
389428
@ContentChildren(MdErrorDirective) _errorChildren: QueryList<MdErrorDirective>;
390-
391429
@ContentChildren(MdHint) _hintChildren: QueryList<MdHint>;
392-
393430
@ContentChildren(MdPrefix) _prefixChildren: QueryList<MdPrefix>;
394-
395431
@ContentChildren(MdSuffix) _suffixChildren: QueryList<MdSuffix>;
396432

397433
constructor(
@@ -407,9 +443,20 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit, AfterC
407443
this._processHints();
408444
this._validatePlaceholders();
409445

410-
// Re-validate when things change.
446+
// Subscribe to changes in the child input state in order to update the container UI.
447+
this._mdInputChild._stateChanges.subscribe(() => {
448+
this._validatePlaceholders();
449+
this._changeDetectorRef.markForCheck();
450+
});
451+
452+
if (this._mdInputChild._ngControl && this._mdInputChild._ngControl.valueChanges) {
453+
this._mdInputChild._ngControl.valueChanges.subscribe(() => {
454+
this._changeDetectorRef.markForCheck();
455+
});
456+
}
457+
458+
// Re-validate when the amount of hints changes.
411459
this._hintChildren.changes.subscribe(() => this._processHints());
412-
this._mdInputChild._placeholderChange.subscribe(() => this._validatePlaceholders());
413460
}
414461

415462
ngAfterContentChecked() {
@@ -429,15 +476,19 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit, AfterC
429476
}
430477

431478
/** Whether the input has a placeholder. */
432-
_hasPlaceholder() { return !!(this._mdInputChild.placeholder || this._placeholderChild); }
479+
_hasPlaceholder() {
480+
return !!(this._mdInputChild.placeholder || this._placeholderChild);
481+
}
433482

434483
/** Focuses the underlying input. */
435-
_focusInput() { this._mdInputChild.focus(); }
484+
_focusInput() {
485+
this._mdInputChild.focus();
486+
}
436487

437488
/** Determines whether to display hints or errors. */
438489
_getDisplayedMessages(): 'error' | 'hint' {
439490
let input = this._mdInputChild;
440-
return (this._errorChildren.length > 0 && input._isErrorState()) ? 'error' : 'hint';
491+
return (this._errorChildren.length > 0 && input._isErrorState) ? 'error' : 'hint';
441492
}
442493

443494
/**

0 commit comments

Comments
 (0)