fix: update notch size outside of angular change detection

Author: mmalerba

src/material/form-field/directives/floating-label.ts

@@ -13,6 +13,7 @@ import {
   EventEmitter,
   inject,
   Input,
+  NgZone,
   OnDestroy,
   Output,
 } from '@angular/core';
@@ -52,19 +53,19 @@ export class MatFormFieldFloatingLabel implements AfterViewInit, OnDestroy {
 
   @Output() resized = new EventEmitter<void>();
 
+  private _ngZone = inject(NgZone);
+
   private _resizeObserver = inject(SharedResizeObserver);
 
   private _stopResizeObserver = () => {};
 
   constructor(private _elementRef: ElementRef<HTMLElement>) {}
 
   ngAfterViewInit() {
-    this._stopResizeObserver = this._resizeObserver.observe(
-      this._elementRef.nativeElement,
-      () => this.resized.emit(),
-      {
+    this._stopResizeObserver = this._ngZone.runOutsideAngular(() =>
+      this._resizeObserver.observe(this._elementRef.nativeElement, () => this.resized.emit(), {
         box: 'border-box',
-      },
+      }),
     );
   }
 

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

@@ -1,5 +1,5 @@
 <div class="mdc-notched-outline__leading"></div>
-<div class="mdc-notched-outline__notch" [style.width]="_getNotchWidth()">
+<div class="mdc-notched-outline__notch" #notch>
   <ng-content></ng-content>
 </div>
 <div class="mdc-notched-outline__trailing"></div>

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

@@ -13,6 +13,7 @@ import {
   ElementRef,
   Input,
   NgZone,
+  ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 
@@ -35,12 +36,11 @@ import {
   encapsulation: ViewEncapsulation.None,
 })
 export class MatFormFieldNotchedOutline implements AfterViewInit {
-  /** Width of the label (original scale) */
-  @Input('matFormFieldNotchedOutlineLabelWidth') labelWidth: number = 0;
-
   /** Whether the notch should be opened. */
   @Input('matFormFieldNotchedOutlineOpen') open: boolean = false;
 
+  @ViewChild('notch') _notch: ElementRef;
+
   constructor(private _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone) {}
 
   ngAfterViewInit(): void {
@@ -59,14 +59,15 @@ export class MatFormFieldNotchedOutline implements AfterViewInit {
     }
   }
 
-  _getNotchWidth() {
-    if (!this.open || !this.labelWidth) {
-      return null;
+  _setNotchWidth(labelWidth: number) {
+    if (!this.open || !labelWidth) {
+      this._notch.nativeElement.style.width = '';
+    } else {
+      const NOTCH_ELEMENT_PADDING = 8;
+      const NOTCH_ELEMENT_BORDER = 1;
+      this._notch.nativeElement.style.width = `calc(${labelWidth}px * var(--mat-mdc-form-field-floating-label-scale, 0.75) + ${
+        NOTCH_ELEMENT_PADDING + NOTCH_ELEMENT_BORDER
+      }px)`;
     }
-    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

@@ -44,8 +44,7 @@
   <div class="mat-mdc-form-field-focus-overlay" *ngIf="!_hasOutline() && !_control.disabled"></div>
   <div class="mat-mdc-form-field-flex">
     <div *ngIf="_hasOutline()" matFormFieldNotchedOutline
-         [matFormFieldNotchedOutlineOpen]="_shouldLabelFloat()"
-         [matFormFieldNotchedOutlineLabelWidth]="_labelWidth">
+         [matFormFieldNotchedOutlineOpen]="_shouldLabelFloat()">
       <ng-template [ngIf]="!_forceDisplayInfixLabel()">
         <ng-template [ngTemplateOutlet]="labelTemplate"></ng-template>
       </ng-template>

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

@@ -218,8 +218,6 @@ export class MatFormField
     }
     this._appearance = newAppearance;
     if (this._appearance === 'outline' && this._appearance !== oldValue) {
-      this._refreshOutlineNotchWidth();
-
       // If the appearance has been switched to `outline`, the label offset needs to be updated.
       // The update can happen once the view has been re-checked, but not immediately because
       // the view has not been updated and the notched-outline floating label is not present.
@@ -267,9 +265,6 @@ export class MatFormField
   /** State of the mat-hint and mat-error animations. */
   _subscriptAnimationState = '';
 
-  /** Width of the label element (at scale=1). */
-  _labelWidth = 0;
-
   /** Gets the current form field control */
   get _control(): MatFormFieldControl<any> {
     return this._explicitFormFieldControl || this._formFieldControl;
@@ -310,9 +305,6 @@ export class MatFormField
     // 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 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';
     // Because the above changes a value used in the template after it was checked, we need
@@ -538,10 +530,11 @@ export class MatFormField
 
   /** Refreshes the width of the outline-notch, if present. */
   _refreshOutlineNotchWidth() {
-    if (!this._hasOutline() || !this._floatingLabel) {
-      return;
+    if (!this._hasOutline() || !this._floatingLabel || !this._shouldLabelFloat()) {
+      this._notchedOutline?._setNotchWidth(0);
+    } else {
+      this._notchedOutline?._setNotchWidth(this._floatingLabel.getWidth());
     }
-    this._labelWidth = this._floatingLabel.getWidth();
   }
 
   /** Does any extra processing that is required when handling the hints. */