From 50d37024eed1e14e272eba032d89f73bff5ea6bf Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 12 Apr 2023 09:03:00 +0200
Subject: [PATCH] fix(material/form-field): outline not updated if required
 state changes

Fixes that the form field outline wasn't being updated when the `required` state of the underlying control changes. Also adds some logic to reduce the amount of times we measure the label on init.

Fixes #26848.
---
 src/material/form-field/form-field.html       |  4 ++--
 src/material/form-field/form-field.ts         | 24 ++++++++++++++++---
 tools/public_api_guard/material/form-field.md |  2 ++
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/material/form-field/form-field.html b/src/material/form-field/form-field.html
index 3c745e81d962..aa53c1dfd3af 100644
--- a/src/material/form-field/form-field.html
+++ b/src/material/form-field/form-field.html
@@ -17,8 +17,8 @@
   <label matFormFieldFloatingLabel
          [floating]="_shouldLabelFloat()"
          *ngIf="_hasFloatingLabel()"
-         (cdkObserveContent)="_refreshOutlineNotchWidth()"
-         [cdkObserveContentDisabled]="!_hasOutline()"
+         (cdkObserveContent)="_labelContentChanged()"
+         [cdkObserveContentDisabled]="!_shouldObserveLabelContentChanges()"
          [id]="_labelId"
          [attr.for]="_control.id"
          [attr.aria-owns]="_control.id">
diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts
index 751f029d2607..9dbb87e534d7 100644
--- a/src/material/form-field/form-field.ts
+++ b/src/material/form-field/form-field.ts
@@ -282,6 +282,7 @@ export class MatFormField
   private _isFocused: boolean | null = null;
   private _explicitFormFieldControl: MatFormFieldControl<any>;
   private _needsOutlineLabelOffsetUpdateOnStable = false;
+  private _isInitialized = false;
 
   constructor(
     public _elementRef: ElementRef,
@@ -332,6 +333,7 @@ export class MatFormField
     // Because the above changes a value used in the template after it was checked, we need
     // to trigger CD or the change might not be reflected if there is no other CD scheduled.
     this._changeDetectorRef.detectChanges();
+    this._isInitialized = true;
   }
 
   ngAfterContentInit() {
@@ -552,10 +554,26 @@ 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._labelWidth = this._floatingLabel.getWidth();
     }
-    this._labelWidth = this._floatingLabel.getWidth();
+  }
+
+  /** Invoked when the content of the label has changed. */
+  _labelContentChanged(): void {
+    this._refreshOutlineNotchWidth();
+    // Required since the changed might have happened after check,
+    // e.g. if the `required` state of the control has changed.
+    this._changeDetectorRef.detectChanges();
+  }
+
+  /** Determines whether the content of the label should be observed for size changes. */
+  _shouldObserveLabelContentChanges(): boolean {
+    // Note that this could be simplified by checking `_isInitialized` in `_labelContentChanged`.
+    // We don't do it, because it doesn't allow us to skip the first emit which is unnecessary
+    // since we already measure the label or init. We want the observer to be set up *after*
+    // the initial content is in place.
+    return this._isInitialized && this._hasOutline();
   }
 
   /** Does any extra processing that is required when handling the hints. */
diff --git a/tools/public_api_guard/material/form-field.md b/tools/public_api_guard/material/form-field.md
index 88d5644cf2cf..45f264089154 100644
--- a/tools/public_api_guard/material/form-field.md
+++ b/tools/public_api_guard/material/form-field.md
@@ -115,6 +115,7 @@ export class MatFormField implements AfterContentInit, AfterContentChecked, Afte
     _labelChildNonStatic: MatLabel | undefined;
     // (undocumented)
     _labelChildStatic: MatLabel | undefined;
+    _labelContentChanged(): void;
     // (undocumented)
     readonly _labelId: string;
     _labelWidth: number;
@@ -137,6 +138,7 @@ export class MatFormField implements AfterContentInit, AfterContentChecked, Afte
     _shouldForward(prop: keyof AbstractControlDirective): boolean;
     // (undocumented)
     _shouldLabelFloat(): boolean;
+    _shouldObserveLabelContentChanges(): boolean;
     _subscriptAnimationState: string;
     get subscriptSizing(): SubscriptSizing;
     set subscriptSizing(value: SubscriptSizing);