Use afterRender instead

Author: mmalerba

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

@@ -19,6 +19,8 @@ import {
   ElementRef,
   Inject,
   InjectionToken,
+  Injector,
+  inject,
   Input,
   NgZone,
   OnDestroy,
@@ -27,9 +29,7 @@ import {
   ViewChild,
   ViewEncapsulation,
   ANIMATION_MODULE_TYPE,
-  afterNextRender,
-  inject,
-  Injector,
+  afterRender,
 } from '@angular/core';
 import {AbstractControlDirective} from '@angular/forms';
 import {ThemePalette} from '@angular/material/core';
@@ -248,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._updateOutlineLabelOffsetAfterNextRender();
+      this._needsOutlineLabelOffsetUpdate = true;
     }
   }
   private _appearance: MatFormFieldAppearance = DEFAULT_APPEARANCE;
@@ -303,6 +303,7 @@ export class MatFormField
   private _destroyed = new Subject<void>();
   private _isFocused: boolean | null = null;
   private _explicitFormFieldControl: MatFormFieldControl<any>;
+  private _needsOutlineLabelOffsetUpdate = false;
 
   private _injector = inject(Injector);
 
@@ -496,10 +497,26 @@ export class MatFormField
    * trigger the label offset update.
    */
   private _initializeOutlineLabelOffsetSubscriptions() {
-    this._prefixChildren.changes.subscribe(() => this._updateOutlineLabelOffsetAfterNextRender());
+    // Whenever the prefix changes, schedule an update of the label offset.
+    this._prefixChildren.changes.subscribe(() => (this._needsOutlineLabelOffsetUpdate = true));
+
+    // TODO(mmalerba): Split this into separate `afterRender` calls using the
+    //  `EarlyRead` and `Write` phases.
+    afterRender(
+      () => {
+        if (this._needsOutlineLabelOffsetUpdate) {
+          this._needsOutlineLabelOffsetUpdate = false;
+          this._updateOutlineLabelOffset();
+        }
+      },
+      {
+        injector: this._injector,
+      },
+    );
+
     this._dir.change
       .pipe(takeUntil(this._destroyed))
-      .subscribe(() => this._updateOutlineLabelOffsetAfterNextRender());
+      .subscribe(() => (this._needsOutlineLabelOffsetUpdate = true));
   }
 
   /** Whether the floating label should always float or not. */
@@ -643,50 +660,41 @@ 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 _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,
-      },
-    );
+  private _updateOutlineLabelOffset() {
+    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 the zone stabilizes.
+    if (!this._isAttachedToDom()) {
+      this._needsOutlineLabelOffsetUpdate = 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})
+    )`;
   }
 
   /** Checks whether the form field is attached to the DOM. */