fix(material/form-field): position outlined form field label correctly when form-field is invisible.

Fixes outlined form-field label position, in cases where form field is attached to the DOM but it's invisible.

Author: behzadmehrabi

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

@@ -17,6 +17,7 @@ import {
   ContentChild,
   ContentChildren,
   ElementRef,
+  inject,
   Inject,
   InjectionToken,
   Input,
@@ -30,8 +31,8 @@ import {
 import {AbstractControlDirective} from '@angular/forms';
 import {ThemePalette} from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {merge, Subject} from 'rxjs';
-import {takeUntil} from 'rxjs/operators';
+import {EMPTY, merge, Subject} from 'rxjs';
+import {finalize, switchMap, takeUntil, tap} from 'rxjs/operators';
 import {MAT_ERROR, MatError} from './directives/error';
 import {
   FLOATING_LABEL_PARENT,
@@ -52,6 +53,7 @@ import {
   getMatFormFieldMissingControlError,
 } from './form-field-errors';
 import {DOCUMENT} from '@angular/common';
+import {SharedResizeObserver} from '@angular/cdk/observers/private';
 
 /** Type for the available floatLabel values. */
 export type FloatLabelType = 'always' | 'auto';
@@ -284,6 +286,9 @@ export class MatFormField
   private _isFocused: boolean | null = null;
   private _explicitFormFieldControl: MatFormFieldControl<any>;
   private _needsOutlineLabelOffsetUpdateOnStable = false;
+  private _needsOutlineLabelPrefixResizeObserverUpdateOnStable = true;
+
+  private _resizeObserver = inject(SharedResizeObserver);
 
   constructor(
     public _elementRef: ElementRef,
@@ -474,9 +479,9 @@ export class MatFormField
    */
   private _initializeOutlineLabelOffsetSubscriptions() {
     // Whenever the prefix changes, schedule an update of the label offset.
-    this._prefixChildren.changes.subscribe(
-      () => (this._needsOutlineLabelOffsetUpdateOnStable = true),
-    );
+    this._prefixChildren.changes.subscribe(() => {
+      this._needsOutlineLabelPrefixResizeObserverUpdateOnStable = 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.
@@ -487,6 +492,18 @@ export class MatFormField
           this._updateOutlineLabelOffset();
         }
       });
+
+      this._ngZone.onStable
+        .pipe(
+          takeUntil(this._destroyed),
+          switchMap(() => this._resizeObserver.observe(this._elementRef.nativeElement)),
+        )
+        .subscribe(() => {
+          if (this._needsOutlineLabelPrefixResizeObserverUpdateOnStable) {
+            this._needsOutlineLabelPrefixResizeObserverUpdateOnStable = false;
+            this._updateOutlineLabelOffsetOnPrefixResize();
+          }
+        });
     });
 
     this._dir.change
@@ -646,8 +663,8 @@ export class MatFormField
       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 the form field is invisible (e.g. in a drawer) or 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;
@@ -672,6 +689,23 @@ export class MatFormField
     )`;
   }
 
+  /**
+   * Updates the horizontal offset of the label in the outline appearance when the prefix containers are resized.
+   */
+  private _updateOutlineLabelOffsetOnPrefixResize() {
+    const iconPrefixContainer = this._iconPrefixContainer?.nativeElement;
+    const textPrefixContainer = this._textPrefixContainer?.nativeElement;
+
+    merge(
+      iconPrefixContainer ? this._resizeObserver.observe(iconPrefixContainer) : EMPTY,
+      textPrefixContainer ? this._resizeObserver.observe(textPrefixContainer) : EMPTY,
+    )
+      .pipe(takeUntil(this._prefixChildren.changes))
+      .subscribe(() => {
+        this._updateOutlineLabelOffset();
+      });
+  }
+
   /** Checks whether the form field is attached to the DOM. */
   private _isAttachedToDom(): boolean {
     const element: HTMLElement = this._elementRef.nativeElement;