refactor(material/form-field): use afterNextRender to schedule outline updates

Author: mmalerba

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

@@ -27,6 +27,9 @@ import {
   ViewChild,
   ViewEncapsulation,
   ANIMATION_MODULE_TYPE,
+  afterNextRender,
+  inject,
+  Injector,
 } from '@angular/core';
 import {AbstractControlDirective} from '@angular/forms';
 import {ThemePalette} from '@angular/material/core';
@@ -245,7 +248,7 @@ export class MatFormField
       // 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.
-      this._needsOutlineLabelOffsetUpdateOnStable = true;
+      this._updateOutlineLabelOffsetAfterNextRender();
     }
   }
   private _appearance: MatFormFieldAppearance = DEFAULT_APPEARANCE;
@@ -300,12 +303,17 @@ export class MatFormField
   private _destroyed = new Subject<void>();
   private _isFocused: boolean | null = null;
   private _explicitFormFieldControl: MatFormFieldControl<any>;
-  private _needsOutlineLabelOffsetUpdateOnStable = false;
+
+  private _injector = inject(Injector);
 
   constructor(
     public _elementRef: ElementRef,
     private _changeDetectorRef: ChangeDetectorRef,
-    private _ngZone: NgZone,
+    /**
+     * @deprecated not needed, to be removed.
+     * @breaking-change 19.0.0 remove this param
+     */
+    _unusedNgZone: NgZone,
     private _dir: Directionality,
     private _platform: Platform,
     @Optional()
@@ -485,30 +493,13 @@ export class MatFormField
    * The floating label in the docked state needs to account for prefixes. The horizontal offset
    * is calculated whenever the appearance changes to `outline`, the prefixes change, or when the
    * form field is added to the DOM. This method sets up all subscriptions which are needed to
-   * trigger the label offset update. In general, we want to avoid performing measurements often,
-   * so we rely on the `NgZone` as indicator when the offset should be recalculated, instead of
-   * checking every change detection cycle.
+   * trigger the label offset update.
    */
   private _initializeOutlineLabelOffsetSubscriptions() {
-    // Whenever the prefix changes, schedule an update of the label offset.
-    this._prefixChildren.changes.subscribe(
-      () => (this._needsOutlineLabelOffsetUpdateOnStable = true),
-    );
-
-    // Note that we have to run outside of the `NgZone` explicitly, in order to avoid
-    // throwing users into an infinite loop if `zone-patch-rxjs` is included.
-    this._ngZone.runOutsideAngular(() => {
-      this._ngZone.onStable.pipe(takeUntil(this._destroyed)).subscribe(() => {
-        if (this._needsOutlineLabelOffsetUpdateOnStable) {
-          this._needsOutlineLabelOffsetUpdateOnStable = false;
-          this._updateOutlineLabelOffset();
-        }
-      });
-    });
-
+    this._prefixChildren.changes.subscribe(() => this._updateOutlineLabelOffsetAfterNextRender());
     this._dir.change
       .pipe(takeUntil(this._destroyed))
-      .subscribe(() => (this._needsOutlineLabelOffsetUpdateOnStable = true));
+      .subscribe(() => this._updateOutlineLabelOffsetAfterNextRender());
   }
 
   /** Whether the floating label should always float or not. */
@@ -652,41 +643,50 @@ export class MatFormField
    * not need to do this because they use a fixed width for prefixes. Hence, they can simply
    * incorporate the horizontal offset into their default text-field styles.
    */
-  private _updateOutlineLabelOffset() {
-    if (!this._platform.isBrowser || !this._hasOutline() || !this._floatingLabel) {
-      return;
-    }
-    const floatingLabel = this._floatingLabel.element;
-    // If no prefix is displayed, reset the outline label offset from potential
-    // previous label offset updates.
-    if (!(this._iconPrefixContainer || this._textPrefixContainer)) {
-      floatingLabel.style.transform = '';
-      return;
-    }
-    // If the form field is not attached to the DOM yet (e.g. in a tab), we defer
-    // the label offset update until the zone stabilizes.
-    if (!this._isAttachedToDom()) {
-      this._needsOutlineLabelOffsetUpdateOnStable = true;
-      return;
-    }
-    const iconPrefixContainer = this._iconPrefixContainer?.nativeElement;
-    const textPrefixContainer = this._textPrefixContainer?.nativeElement;
-    const iconPrefixContainerWidth = iconPrefixContainer?.getBoundingClientRect().width ?? 0;
-    const textPrefixContainerWidth = textPrefixContainer?.getBoundingClientRect().width ?? 0;
-    // If the directionality is RTL, the x-axis transform needs to be inverted. This
-    // is because `transformX` does not change based on the page directionality.
-    const negate = this._dir.value === 'rtl' ? '-1' : '1';
-    const prefixWidth = `${iconPrefixContainerWidth + textPrefixContainerWidth}px`;
-    const labelOffset = `var(--mat-mdc-form-field-label-offset-x, 0px)`;
-    const labelHorizontalOffset = `calc(${negate} * (${prefixWidth} + ${labelOffset}))`;
-
-    // Update the translateX of the floating label to account for the prefix container,
-    // but allow the CSS to override this setting via a CSS variable when the label is
-    // floating.
-    floatingLabel.style.transform = `var(
-        --mat-mdc-form-field-label-transform,
-        ${FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM} translateX(${labelHorizontalOffset})
-    )`;
+  private _updateOutlineLabelOffsetAfterNextRender() {
+    // TODO(mmalerba): Split this into separate `afterNextRender` calls using the `EarlyRead` and
+    //  `Write` phases.
+    afterNextRender(
+      () => {
+        if (!this._hasOutline() || !this._floatingLabel) {
+          return;
+        }
+        const floatingLabel = this._floatingLabel.element;
+        // If no prefix is displayed, reset the outline label offset from potential
+        // previous label offset updates.
+        if (!(this._iconPrefixContainer || this._textPrefixContainer)) {
+          floatingLabel.style.transform = '';
+          return;
+        }
+        // If the form field is not attached to the DOM yet (e.g. in a tab), we defer
+        // the label offset update until after the next render.
+        if (!this._isAttachedToDom()) {
+          this._updateOutlineLabelOffsetAfterNextRender();
+          return;
+        }
+        const iconPrefixContainer = this._iconPrefixContainer?.nativeElement;
+        const textPrefixContainer = this._textPrefixContainer?.nativeElement;
+        const iconPrefixContainerWidth = iconPrefixContainer?.getBoundingClientRect().width ?? 0;
+        const textPrefixContainerWidth = textPrefixContainer?.getBoundingClientRect().width ?? 0;
+        // If the directionality is RTL, the x-axis transform needs to be inverted. This
+        // is because `transformX` does not change based on the page directionality.
+        const negate = this._dir.value === 'rtl' ? '-1' : '1';
+        const prefixWidth = `${iconPrefixContainerWidth + textPrefixContainerWidth}px`;
+        const labelOffset = `var(--mat-mdc-form-field-label-offset-x, 0px)`;
+        const labelHorizontalOffset = `calc(${negate} * (${prefixWidth} + ${labelOffset}))`;
+
+        // Update the translateX of the floating label to account for the prefix container,
+        // but allow the CSS to override this setting via a CSS variable when the label is
+        // floating.
+        floatingLabel.style.transform = `var(
+          --mat-mdc-form-field-label-transform,
+          ${FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM} translateX(${labelHorizontalOffset})
+      )`;
+      },
+      {
+        injector: this._injector,
+      },
+    );
   }
 
   /** Checks whether the form field is attached to the DOM. */

tools/public_api_guard/material/form-field.md

@@ -66,7 +66,8 @@ export class MatError {
 
 // @public
 export class MatFormField implements FloatingLabelParent, AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy {
-    constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _dir: Directionality, _platform: Platform, _defaults?: MatFormFieldDefaultOptions | undefined, _animationMode?: string | undefined,
+    constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef,
+    _unusedNgZone: NgZone, _dir: Directionality, _platform: Platform, _defaults?: MatFormFieldDefaultOptions | undefined, _animationMode?: string | undefined,
     _unusedDocument?: any);
     _animateAndLockLabel(): void;
     // (undocumented)