Skip to content

fix(form-field): infinite loop when using outline appearance and element isn't in the DOM #11406

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 24, 2018
Merged

fix(form-field): infinite loop when using outline appearance and element isn't in the DOM #11406

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 18 additions & 5 deletions src/lib/form-field/form-field.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
Inject,
InjectionToken,
Input,
NgZone,
Optional,
QueryList,
ViewChild,
Expand Down Expand Up @@ -221,8 +222,9 @@ export class MatFormField extends _MatFormFieldMixinBase
@Optional() private _dir: Directionality,
@Optional() @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) private _defaultOptions:
MatFormFieldDefaultOptions,
// @deletion-target 7.0.0 _platform to be made required.
private _platform?: Platform) {
// @deletion-target 7.0.0 _platform and _ngZone to be made required.
private _platform?: Platform,
private _ngZone?: NgZone) {
super(_elementRef);

this._labelOptions = labelOptions ? labelOptions : {};
Expand Down Expand Up @@ -271,8 +273,19 @@ export class MatFormField extends _MatFormFieldMixinBase

ngAfterContentChecked() {
this._validateControlChild();

if (!this._initialGapCalculated) {
Promise.resolve().then(() => this.updateOutlineGap());
// @deletion-target 7.0.0 Remove this check and else block once _ngZone is required.
if (this._ngZone) {
// It's important that we run this outside the `_ngZone`, because the `Promise.resolve`
// can kick us into an infinite change detection loop, if the `_initialGapCalculated`
// wasn't flipped on for some reason.
this._ngZone.runOutsideAngular(() => {
Promise.resolve().then(() => this.updateOutlineGap());
});
} else {
Promise.resolve().then(() => this.updateOutlineGap());
}
}
}

Expand All @@ -284,8 +297,8 @@ export class MatFormField extends _MatFormFieldMixinBase

/** Determines whether a class from the NgControl should be forwarded to the host element. */
_shouldForward(prop: string): boolean {
let ngControl = this._control ? this._control.ngControl : null;
return ngControl && (ngControl as any)[prop];
const ngControl = this._control ? this._control.ngControl : null;
return ngControl && ngControl[prop];
}

_hasPlaceholder() {
Expand Down