From e1770c17267266129429cffcb47e7b81458aacdb Mon Sep 17 00:00:00 2001
From: Dumitrescu Alexandru
 <89769969+adumitrescu-plenty@users.noreply.github.com>
Date: Mon, 27 May 2024 10:04:09 +0300
Subject: [PATCH] fix(form-field): outline label position

Fixes the outline label position when a prefix is present and the form field is not yet rendered.

Fixes #29064
---
 src/material/form-field/form-field.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts
index 0b6e02e40164..2a64ffae9b36 100644
--- a/src/material/form-field/form-field.ts
+++ b/src/material/form-field/form-field.ts
@@ -703,12 +703,18 @@ export class MatFormField
     const element: HTMLElement = this._elementRef.nativeElement;
     if (element.getRootNode) {
       const rootNode = element.getRootNode();
-      // If the element is inside the DOM the root node will be either the document
-      // or the closest shadow root, otherwise it'll be the element itself.
-      return rootNode && rootNode !== element;
+      // If the element is inside the DOM the root node will be either the document,
+      // the closest shadow root or an element that is not yet rendered, otherwise it'll be the element itself.
+      if (rootNode && rootNode !== element) {
+        // If the element is either a shadow root or the documen itslef
+        if (rootNode instanceof ShadowRoot || rootNode === document) {
+          return true;
+        }
+      }
     }
     // Otherwise fall back to checking if it's in the document. This doesn't account for
     // shadow DOM, however browser that support shadow DOM should support `getRootNode` as well.
+    // If the element is not in the document it means that the element is not yet rendered.
     return document.documentElement!.contains(element);
   }
 }