Skip to content

fix(material-experimental/mdc-form-field): make sure fonts are loaded… #21245

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
Dec 11, 2020
Merged

fix(material-experimental/mdc-form-field): make sure fonts are loaded… #21245

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
18 changes: 17 additions & 1 deletion src/material-experimental/mdc-form-field/form-field.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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
Expand Down