fix(form-field): update label gap for outline style

Author: josephperrott

src/lib/form-field/BUILD.bazel

@@ -18,6 +18,7 @@ ng_module(
   deps = [
     "//src/lib/core",
     "//src/cdk/coercion",
+    "//src/cdk/observers",
     "//src/cdk/platform",
   ],
   tsconfig = "//src/lib:tsconfig-build.json",

src/lib/form-field/form-field-module.ts

@@ -8,6 +8,7 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {ObserversModule} from '@angular/cdk/observers';
 import {MatError} from './error';
 import {MatFormField} from './form-field';
 import {MatHint} from './hint';
@@ -27,7 +28,10 @@ import {MatSuffix} from './suffix';
     MatPrefix,
     MatSuffix,
   ],
-  imports: [CommonModule],
+  imports: [
+    CommonModule,
+    ObserversModule,
+  ],
   exports: [
     MatError,
     MatFormField,

src/lib/form-field/form-field.html

@@ -5,13 +5,13 @@
     <!-- Outline used for outline appearance. -->
     <ng-container *ngIf="appearance == 'outline'">
       <div class="mat-form-field-outline">
-        <div class="mat-form-field-outline-start" [style.width.px]="_outlineGapStart"></div>
-        <div class="mat-form-field-outline-gap" [style.width.px]="_outlineGapWidth"></div>
+        <div class="mat-form-field-outline-start"></div>
+        <div class="mat-form-field-outline-gap"></div>
         <div class="mat-form-field-outline-end"></div>
       </div>
       <div class="mat-form-field-outline mat-form-field-outline-thick">
-        <div class="mat-form-field-outline-start" [style.width.px]="_outlineGapStart"></div>
-        <div class="mat-form-field-outline-gap" [style.width.px]="_outlineGapWidth"></div>
+        <div class="mat-form-field-outline-start"></div>
+        <div class="mat-form-field-outline-gap"></div>
         <div class="mat-form-field-outline-end"></div>
       </div>
     </ng-container>
@@ -27,6 +27,7 @@
         <!-- We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't
              read if it comes before the control in the DOM. -->
         <label class="mat-form-field-label"
+               (cdkObserveContent)="updateOutlineGap()"
                [id]="_labelId"
                [attr.for]="_control.id"
                [attr.aria-owns]="_control.id"

src/lib/form-field/form-field.ts

@@ -21,7 +21,6 @@ import {
   Inject,
   InjectionToken,
   Input,
-  NgZone,
   Optional,
   QueryList,
   ViewChild,
@@ -148,12 +147,13 @@ export class MatFormField extends _MatFormFieldMixinBase
     return this._appearance || this._defaultOptions && this._defaultOptions.appearance || 'legacy';
   }
   set appearance(value: MatFormFieldAppearance) {
-    // If we're switching to `outline` from another appearance, we have to recalculate the gap.
-    if (value !== this._appearance && value === 'outline') {
-      this._initialGapCalculated = false;
-    }
-
     this._appearance = value;
+    if (value === 'outline') {
+      // The outline gap cannot update until change detection causes the ngIf updates, causing the
+      // outline elements to show in the dom.  This is a safe action to take because
+      // updateOutlineGap does not cause a change detection cycle to run.
+      Promise.resolve().then(() => this.updateOutlineGap());
+    }
   }
   _appearance: MatFormFieldAppearance;
 
@@ -217,17 +217,13 @@ export class MatFormField extends _MatFormFieldMixinBase
   /** Whether the Angular animations are enabled. */
   _animationsEnabled: boolean;
 
-  _outlineGapWidth = 0;
-  _outlineGapStart = 0;
-  _initialGapCalculated = false;
-
   /**
    * @deprecated
    * @breaking-change 7.0.0
    */
   @ViewChild('underline') underlineRef: ElementRef;
 
-  @ViewChild('connectionContainer') _connectionContainerRef: ElementRef;
+  @ViewChild('connectionContainer') _connectionContainerRef: ElementRef<HTMLDivElement>;
   @ViewChild('inputContainer') _inputContainerRef: ElementRef;
   @ViewChild('label') private _label: ElementRef;
   @ContentChild(MatFormFieldControl) _control: MatFormFieldControl<any>;
@@ -245,9 +241,8 @@ export class MatFormField extends _MatFormFieldMixinBase
       @Optional() private _dir: Directionality,
       @Optional() @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) private _defaultOptions:
           MatFormFieldDefaultOptions,
-      // @breaking-change 7.0.0 _platform, _ngZone and _animationMode to be made required.
+      // @breaking-change 7.0.0 _platform and _animationMode to be made required.
       private _platform?: Platform,
-      private _ngZone?: NgZone,
       @Optional() @Inject(ANIMATION_MODULE_TYPE) _animationMode?: string) {
     super(_elementRef);
 
@@ -298,26 +293,13 @@ export class MatFormField extends _MatFormFieldMixinBase
 
   ngAfterContentChecked() {
     this._validateControlChild();
-
-    if (!this._initialGapCalculated) {
-      // @breaking-change 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());
-      }
-    }
   }
 
   ngAfterViewInit() {
     // Avoid animations on load.
     this._subscriptAnimationState = 'enter';
     this._changeDetectorRef.detectChanges();
+    this.updateOutlineGap();
   }
 
   /** Determines whether a class from the NgControl should be forwarded to the host element. */
@@ -422,9 +404,9 @@ export class MatFormField extends _MatFormFieldMixinBase
       let ids: string[] = [];
 
       if (this._getDisplayedMessages() === 'hint') {
-        let startHint = this._hintChildren ?
+        const startHint = this._hintChildren ?
             this._hintChildren.find(hint => hint.align === 'start') : null;
-        let endHint = this._hintChildren ?
+        const endHint = this._hintChildren ?
             this._hintChildren.find(hint => hint.align === 'end') : null;
 
         if (startHint) {
@@ -456,10 +438,19 @@ export class MatFormField extends _MatFormFieldMixinBase
    * appearance.
    */
   updateOutlineGap() {
-    if (this.appearance === 'outline' && this._label && this._label.nativeElement.children.length) {
+    if (this.appearance !== 'outline') {
+      return;
+    }
+
+    let startWidth = 0;
+    let gapWidth = 0;
+    const startEls = this._connectionContainerRef.nativeElement.querySelectorAll<HTMLDivElement>(
+      '.mat-form-field-outline-start');
+    const gapEls = this._connectionContainerRef.nativeElement.querySelectorAll<HTMLDivElement>(
+        '.mat-form-field-outline-gap');
+    if (this._label && this._label.nativeElement.children.length) {
       if (this._platform && !this._platform.isBrowser) {
         // getBoundingClientRect isn't available on the server.
-        this._initialGapCalculated = true;
         return;
       }
       if (!document.documentElement.contains(this._elementRef.nativeElement)) {
@@ -474,14 +465,16 @@ export class MatFormField extends _MatFormFieldMixinBase
       for (const child of this._label.nativeElement.children) {
         labelWidth += child.offsetWidth;
       }
-      this._outlineGapStart = labelStart - containerStart - outlineGapPadding;
-      this._outlineGapWidth = labelWidth * floatingLabelScale + outlineGapPadding * 2;
-    } else {
-      this._outlineGapStart = 0;
-      this._outlineGapWidth = 0;
+      startWidth = labelStart - containerStart - outlineGapPadding;
+      gapWidth = labelWidth * floatingLabelScale + outlineGapPadding * 2;
+    }
+
+    for (let i = 0; i < startEls.length; i++) {
+      startEls.item(i).style.width = `${startWidth}px`;
+    }
+    for (let i = 0; i < gapEls.length; i++) {
+      gapEls.item(i).style.width = `${gapWidth}px`;
     }
-    this._initialGapCalculated = true;
-    this._changeDetectorRef.markForCheck();
   }
 
   /** Gets the start end of the rect considering the current directionality. */