fix: update notch when label resizes

Author: mmalerba

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

@@ -60,16 +60,13 @@ export class MatFormFieldNotchedOutline implements AfterViewInit {
   }
 
   _getNotchWidth() {
-    if (this.open) {
-      const NOTCH_ELEMENT_PADDING = 8;
-      const NOTCH_ELEMENT_BORDER = 1;
-      return this.labelWidth > 0
-        ? `calc(${this.labelWidth}px * var(--mat-mdc-form-field-floating-label-scale, 0.75) + ${
-            NOTCH_ELEMENT_PADDING + NOTCH_ELEMENT_BORDER
-          }px)`
-        : '0px';
+    if (!this.open || !this.labelWidth) {
+      return null;
     }
-
-    return null;
+    const NOTCH_ELEMENT_PADDING = 8;
+    const NOTCH_ELEMENT_BORDER = 1;
+    return `calc(${this.labelWidth}px * var(--mat-mdc-form-field-floating-label-scale, 0.75) + ${
+      NOTCH_ELEMENT_PADDING + NOTCH_ELEMENT_BORDER
+    }px)`;
   }
 }

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

@@ -17,11 +17,10 @@
   <label matFormFieldFloatingLabel
          [floating]="_shouldLabelFloat()"
          *ngIf="_hasFloatingLabel()"
-         (cdkObserveContent)="_refreshOutlineNotchWidth()"
-         [cdkObserveContentDisabled]="!_hasOutline()"
          [id]="_labelId"
          [attr.for]="_control.id"
-         [attr.aria-owns]="_control.id">
+         [attr.aria-owns]="_control.id"
+         (resized)="_refreshOutlineNotchWidth()">
     <ng-content select="mat-label"></ng-content>
     <!--
       We set the required marker as a separate element, in order to make it easier to target if

src/material/form-field/form-field.scss

@@ -148,3 +148,12 @@
     @include mdc-line-ripple.core-styles($query: animation);
   }
 }
+
+// Allow the label to grow 1px bigger than the notch.
+// If we see this actually happen we know we need to resize the notch.
+.mdc-notched-outline .mdc-floating-label {
+  max-width: calc(100% + 1px);
+}
+.mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+  max-width: calc(100% * 4 / 3 + 1px);
+}

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

@@ -313,20 +313,6 @@ export class MatFormField
     // 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