fix(material-experimental/mdc-form-field): properly render notched-outline on the server

Currently, form fields which use the outline appearance and have an
initial value, are not properly rendered on the server. This is because
we don't create the MDC notched-outline component on the server, nor do
we provide the proper initial notched-outline HTML markup. The initial
markup that we render on the server, should include the information that
the notch is initially open.

This is done by adding the `mdc-notched-outline--notched` class based on
the notched-outline `open` state.

No longer relying on the focus/blur to update the notched-outline also
fixes a bug where the label overlaps the closed outline-notch if the
input value changes programmatically.

Author: devversion

src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss

@@ -100,7 +100,8 @@
   // the horizontal adjustment for the label is applied through inline styles, and we want to
   // make sure that the label can still float as expected. It should be okay using `!important`
   // because it's unlikely that developers commonly overwrite the floating label transform.
-  .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-floating-label--float-above {
+  .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded
+  .mdc-floating-label--float-above {
     // This transform has been extracted from the MDC text-field styles. We can't access it
     // through a variable because MDC generates this label transform through a mixin.
     transform: translateY(-$mdc-text-field-outlined-label-position-y) scale(0.75) !important;

src/material-experimental/mdc-form-field/directives/notched-outline.ts

@@ -11,30 +11,43 @@ import {
   AfterViewInit,
   ChangeDetectionStrategy,
   Component,
-  ElementRef, OnDestroy,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnDestroy,
   ViewEncapsulation
 } from '@angular/core';
 import {MDCNotchedOutline} from '@material/notched-outline';
 
 /**
- * Internal directive that creates an instance of the MDC notched-outline component. Using
+ * Internal component that creates an instance of the MDC notched-outline component. Using
  * a directive allows us to conditionally render a notched-outline in the template without
  * having to manually create and destroy the `MDCNotchedOutline` component whenever the
  * appearance changes.
  *
- * The directive sets up the HTML structure and styles for the notched-outline, but also
- * exposes a programmatic API to toggle the state of the notch.
+ * The component sets up the HTML structure and styles for the notched-outline. It provides
+ * inputs to toggle the notch state and width.
  */
 @Component({
   selector: 'div[matFormFieldNotchedOutline]',
   templateUrl: './notched-outline.html',
   host: {
     'class': 'mdc-notched-outline',
+    // Besides updating the notch state through the MDC component, we toggle this class through
+    // a host binding in order to ensure that the notched-outline renders correctly on the server.
+    '[class.mdc-notched-outline--notched]': 'open',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MatFormFieldNotchedOutline implements AfterViewInit, OnDestroy {
+export class MatFormFieldNotchedOutline implements AfterViewInit, OnChanges, OnDestroy {
+  /** Width of the notch. */
+  @Input('matFormFieldNotchedOutlineWidth') width: number = 0;
+
+  /** Whether the notch should be opened. */
+  @Input('matFormFieldNotchedOutlineOpen') open: boolean = false;
+
+  /** Instance of the MDC notched outline. */
   private _mdcNotchedOutline: MDCNotchedOutline|null = null;
 
   constructor(private _elementRef: ElementRef, private _platform: Platform) {}
@@ -51,25 +64,26 @@ export class MatFormFieldNotchedOutline implements AfterViewInit, OnDestroy {
     }
   }
 
+  ngOnChanges() {
+    // Whenever the width, or the open state changes, sync the notched outline to be
+    // based on the new values.
+    this._syncNotchedOutlineState();
+  }
+
   ngOnDestroy() {
     if (this._mdcNotchedOutline !== null) {
       this._mdcNotchedOutline.destroy();
     }
   }
 
-  /**
-   * Updates classes and styles to open the notch to the specified width.
-   * @param notchWidth The notch width in the outline.
-   */
-  notch(notchWidth: number) {
-    if (this._mdcNotchedOutline !== null) {
-      this._mdcNotchedOutline.notch(notchWidth);
+  /** Synchronizes the notched outline state to be based on the `width` and `open` inputs. */
+  private _syncNotchedOutlineState() {
+    if (this._mdcNotchedOutline === null) {
+      return;
     }
-  }
-
-  /** Closes the notch. */
-  closeNotch() {
-    if (this._mdcNotchedOutline !== null) {
+    if (this.open) {
+      this._mdcNotchedOutline.notch(this.width);
+    } else {
       this._mdcNotchedOutline.closeNotch();
     }
   }

src/material-experimental/mdc-form-field/form-field.html

@@ -3,7 +3,7 @@
      read if it comes before the control in the DOM. -->
   <label matFormFieldFloatingLabel [floating]="_shouldLabelFloat()"
          *ngIf="_hasFloatingLabel()"
-         (cdkObserveContent)="_rerenderOutlineNotch()"
+         (cdkObserveContent)="_refreshOutlineNotchWidth()"
          [cdkObserveContentDisabled]="!_hasOutline()"
          [id]="_labelId"
          [attr.for]="_control.id"
@@ -26,7 +26,9 @@
      [class.mdc-text-field--invalid]="_control.errorState"
      (click)="_control.onContainerClick && _control.onContainerClick($event)">
   <div class="mat-mdc-form-field-flex">
-    <div matFormFieldNotchedOutline *ngIf="_hasOutline()">
+    <div *ngIf="_hasOutline()" matFormFieldNotchedOutline
+         [matFormFieldNotchedOutlineOpen]="_shouldLabelFloat()"
+         [matFormFieldNotchedOutlineWidth]="_outlineNotchWidth">
       <ng-template [ngIf]="!_forceDisplayInfixLabel()">
         <ng-template [ngTemplateOutlet]="labelTemplate"></ng-template>
       </ng-template>

src/material-experimental/mdc-form-field/form-field.ts

@@ -42,7 +42,11 @@ import {
   MatFormFieldControl,
 } from '@angular/material/form-field';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {MDCTextFieldAdapter, MDCTextFieldFoundation} from '@material/textfield';
+import {
+  MDCTextFieldAdapter,
+  MDCTextFieldFoundation,
+  numbers as mdcTextFieldNumbers
+} from '@material/textfield';
 import {merge, Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {MatError} from './directives/error';
@@ -197,6 +201,9 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
   /** State of the mat-hint and mat-error animations. */
   _subscriptAnimationState: string = '';
 
+  /** Width of the outline notch. */
+  _outlineNotchWidth: number;
+
   /** Gets the current form field control */
   get _control(): MatFormFieldControl<any> {
     return this._explicitFormFieldControl || this._formFieldControl;
@@ -229,16 +236,24 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
     // TODO(devversion): explore options on how to integrate label shaking.
     shakeLabel: () => {},
 
-    getLabelWidth: () => this._floatingLabel ? this._floatingLabel.getWidth() : 0,
-    notchOutline: labelWidth => this._notchedOutline && this._notchedOutline.notch(labelWidth),
-    closeOutline: () => this._notchedOutline && this._notchedOutline.closeNotch(),
+    // MDC by default updates the notched-outline whenever the text-field receives focus, or
+    // is being blurred. It also computes the label width every time the notch is opened or
+    // closed. This works fine in the standard MDC text-field, but not in Angular where the
+    // floating label could change through interpolation. We want to be able to update the
+    // notched outline whenever the label content changes. Additionally, relying on focus or
+    // blur to open and close the notch does not work for us since abstract form-field controls
+    // have the ability to control the floating label state (i.e. `shouldLabelFloat`), and we
+    // want to update the notch whenever the `_shouldLabelFloat()` value changes.
+    getLabelWidth: () => 0,
+    notchOutline: () => {},
+    closeOutline: () => {},
 
     activateLineRipple: () => this._lineRipple && this._lineRipple.activate(),
     deactivateLineRipple: () => this._lineRipple && this._lineRipple.deactivate(),
 
     // The foundation tries to register events on the input. This is not matching
     // our concept of abstract form field controls. We handle each event manually
-    // in "ngDoCheck" based on the form-field control state. The following events
+    // in "stateChanges" based on the form-field control state. The following events
     // need to be handled: focus, blur. We do not handle the "input" event since
     // that one is only needed for the text-field character count, which we do
     // not implement as part of the form-field, but should be implemented manually
@@ -310,8 +325,9 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
     // Initial focus state sync. This happens rarely, but we want to account for
     // it in case the form-field control has "focused" set to true on init.
     this._updateFocusState();
-    // Initial notch update since we overwrote the "shouldFloat" getter.
-    this._rerenderOutlineNotch();
+    // 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();
     // Enable animations now. This ensures we don't animate on initial render.
     this._subscriptAnimationState = 'enter';
   }
@@ -462,12 +478,6 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
       .subscribe(() => this._needsOutlineLabelOffsetUpdateOnStable = true);
   }
 
-  _rerenderOutlineNotch() {
-    if (this._floatingLabel && this._hasOutline()) {
-      this._foundation.notchOutline(this._shouldLabelFloat());
-    }
-  }
-
   /** Whether the floating label should always float or not. */
   _shouldAlwaysFloat() {
     return this.floatLabel === 'always';
@@ -486,7 +496,7 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
    * the label is part of the infix, the label cannot overflow the prefix content.
    */
   _forceDisplayInfixLabel() {
-    return !this._platform.isBrowser && this._prefixContainer && !this._shouldLabelFloat();
+    return !this._platform.isBrowser && this._prefixChildren.length && !this._shouldLabelFloat();
   }
 
   _hasFloatingLabel() {
@@ -509,6 +519,17 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
       this._control.errorState) ? 'error' : 'hint';
   }
 
+  /** Refreshes the width of the outline-notch, if present. */
+  _refreshOutlineNotchWidth() {
+    if (!this._hasOutline() || !this._floatingLabel) {
+      return;
+    }
+    // The outline notch should be based on the label width, but needs to respect the scaling
+    // applied to the label if it actively floats. Since the label always floats when the notch
+    // is open, the MDC text-field floating label scaling is respected in notch width calculation.
+    this._outlineNotchWidth = this._floatingLabel.getWidth() * mdcTextFieldNumbers.LABEL_SCALE;
+  }
+
   /** Does any extra processing that is required when handling the hints. */
   private _processHints() {
     this._validateHints();