fix: address feedback

Author: mmalerba

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

@@ -17,7 +17,6 @@ import {
   Output,
 } from '@angular/core';
 import {SharedResizeObserver} from '../shared-resize-observer';
-import {Platform} from '@angular/cdk/platform';
 import {Subscription} from 'rxjs';
 
 /**
@@ -54,28 +53,31 @@ export class MatFormFieldFloatingLabel implements OnDestroy {
   }
   private _floating = false;
 
+  /** Whether to monitor for resize events on the floating label. */
   @Input()
   get monitorResize() {
     return this._monitorResize;
   }
   set monitorResize(value: boolean) {
     this._monitorResize = value;
     if (this._monitorResize) {
-      this._startResizeObserver();
+      this._subscribeToResize();
     } else {
       this._resizeSubscription.unsubscribe();
     }
   }
   private _monitorResize = false;
 
+  /** Emits when the label is resized (if resize events are being monitored). */
   @Output() resized = new EventEmitter<void>();
 
-  private _ngZone = inject(NgZone);
-
-  private _platform = inject(Platform);
-
+  /** The shared ResizeObserver. */
   private _resizeObserver = inject(SharedResizeObserver);
 
+  /** The Angular zone. */
+  private _ngZone = inject(NgZone);
+
+  /** The current resize event subscription. */
   private _resizeSubscription = new Subscription();
 
   constructor(private _elementRef: ElementRef<HTMLElement>) {}
@@ -94,6 +96,7 @@ export class MatFormFieldFloatingLabel implements OnDestroy {
     return this._elementRef.nativeElement;
   }
 
+  /** Handles resize events from the ResizeObserver. */
   private _handleResize() {
     // In the case where the label grows in size, the following sequence of events occurs:
     // 1. The label grows by 1px triggering the ResizeObserver
@@ -106,13 +109,14 @@ export class MatFormFieldFloatingLabel implements OnDestroy {
     setTimeout(() => this.resized.emit());
   }
 
-  private _startResizeObserver() {
-    if (this._platform.isBrowser) {
-      this._resizeSubscription.unsubscribe();
+  /** Subscribes to resize events. */
+  private _subscribeToResize() {
+    this._resizeSubscription.unsubscribe();
+    this._ngZone.runOutsideAngular(() => {
       this._resizeSubscription = this._resizeObserver
         .observe(this._elementRef.nativeElement, {box: 'border-box'})
         .subscribe(() => this._handleResize());
-    }
+    });
   }
 }
 

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

@@ -16,7 +16,7 @@
   -->
   <label matFormFieldFloatingLabel
          [floating]="_shouldLabelFloat()"
-         [monitorResize]="appearance === 'outline'"
+         [monitorResize]="_hasOutline()"
          *ngIf="_hasFloatingLabel()"
          [id]="_labelId"
          [attr.for]="_control.id"

src/material/form-field/shared-resize-observer.ts

@@ -8,6 +8,7 @@
 import {inject, Injectable, NgZone, OnDestroy} from '@angular/core';
 import {Observable, Subject} from 'rxjs';
 import {filter, shareReplay, takeUntil} from 'rxjs/operators';
+import {Platform} from '@angular/cdk/platform';
 
 /**
  * Handler that logs "ResizeObserver loop limit exceeded" errors.
@@ -32,14 +33,20 @@ class SingleBoxSharedResizeObserver {
   /** Stream of all events from the ResizeObserver. */
   private _resizeSubject = new Subject<ResizeObserverEntry[]>();
   /** ResizeObserver used to observe element resize events. */
-  private _resizeObserver = new ResizeObserver(entries => this._resizeSubject.next(entries));
+  private _resizeObserver?: ResizeObserver;
   /** A map of elements to streams of their resize events. */
   private _elementObservables = new Map<Element, Observable<ResizeObserverEntry[]>>();
 
   constructor(
     /** The box type to observe for resizes. */
     private _box: ResizeObserverBoxOptions,
-  ) {}
+    /** The platform. */
+    platform: Platform,
+  ) {
+    if (platform.isBrowser) {
+      this._resizeObserver = new ResizeObserver(entries => this._resizeSubject.next(entries));
+    }
+  }
 
   /**
    * Gets a stream of resize events for the given element.
@@ -54,9 +61,9 @@ class SingleBoxSharedResizeObserver {
           const subscription = this._resizeSubject
             .pipe(filter(entries => entries.some(entry => entry.target === target)))
             .subscribe(observer);
-          this._resizeObserver.observe(target, {box: this._box});
+          this._resizeObserver?.observe(target, {box: this._box});
           return () => {
-            this._resizeObserver.unobserve(target);
+            this._resizeObserver?.unobserve(target);
             subscription.unsubscribe();
             this._elementObservables.delete(target);
           };
@@ -78,7 +85,6 @@ class SingleBoxSharedResizeObserver {
     this._destroyed.complete();
     this._resizeSubject.complete();
     this._elementObservables.clear();
-    this._resizeObserver.disconnect();
   }
 }
 
@@ -102,6 +108,9 @@ export class SharedResizeObserver implements OnDestroy {
   /** The Angular zone. */
   private _ngZone = inject(NgZone);
 
+  /** The platform. */
+  private _platform = inject(Platform);
+
   constructor() {
     if (typeof ngDevMode === 'undefined' || ngDevMode) {
       this._ngZone.runOutsideAngular(() => {
@@ -129,7 +138,7 @@ export class SharedResizeObserver implements OnDestroy {
   observe(target: Element, options?: ResizeObserverOptions): Observable<ResizeObserverEntry[]> {
     const box = options?.box || 'content-box';
     if (!this._observers.has(box)) {
-      this._observers.set(box, new SingleBoxSharedResizeObserver(box));
+      this._observers.set(box, new SingleBoxSharedResizeObserver(box, this._platform));
     }
     return this._observers.get(box)!.observe(target);
   }