From 5f91c959899d6f1455d65facf15b17678f74f96a Mon Sep 17 00:00:00 2001 From: Annie Wang Date: Mon, 7 Dec 2020 15:11:44 -0800 Subject: [PATCH] fix(material-experimental/mdc-form-field): make sure fonts are loaded before calculating notch width --- .../mdc-form-field/form-field.ts | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/material-experimental/mdc-form-field/form-field.ts b/src/material-experimental/mdc-form-field/form-field.ts index 1ae428cd4f4d..3ef7684f4d1a 100644 --- a/src/material-experimental/mdc-form-field/form-field.ts +++ b/src/material-experimental/mdc-form-field/form-field.ts @@ -52,6 +52,7 @@ import {MatFormFieldLineRipple} from './directives/line-ripple'; import {MatFormFieldNotchedOutline} from './directives/notched-outline'; import {MAT_PREFIX, MatPrefix} from './directives/prefix'; import {MAT_SUFFIX, MatSuffix} from './directives/suffix'; +import {DOCUMENT} from '@angular/common'; /** Type for the available floatLabel values. */ export type FloatLabelType = 'always' | 'auto'; @@ -308,7 +309,8 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck private _platform: Platform, @Optional() @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) private _defaults?: MatFormFieldDefaultOptions, - @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) { + @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string, + @Inject(DOCUMENT) private _document?: any) { if (_defaults && _defaults.appearance) { this.appearance = _defaults.appearance; } else if (_defaults && _defaults.hideRequiredMarker) { @@ -341,6 +343,20 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck // Initial notch width update. This is needed in case the text-field label floats // on initialization, and renders inside of the notched outline. this._refreshOutlineNotchWidth(); + // Make sure fonts are loaded before calculating the width. + // zone.js currently doesn't patch the FontFaceSet API so two calls to + // _refreshOutlineNotchWidth is needed for this to work properly in async tests. + // Furthermore if the font takes a long time to load we want the outline notch to be close + // to the correct width from the start then correct itself when the fonts load. + if (this._document?.fonts?.ready) { + this._document.fonts.ready.then(() => { + this._refreshOutlineNotchWidth(); + this._changeDetectorRef.markForCheck(); + }); + } else { + // FontFaceSet is not supported in IE + setTimeout(() => this._refreshOutlineNotchWidth(), 100); + } // Enable animations now. This ensures we don't animate on initial render. this._subscriptAnimationState = 'enter'; // Because the above changes a value used in the template after it was checked, we need