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 1/6] 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); } } From e98b31108580f1cd7f6cb040792f8a9297f96cf3 Mon Sep 17 00:00:00 2001 From: Dumitrescu Alexandru <89769969+adumitrescu-plenty@users.noreply.github.com> Date: Mon, 27 May 2024 13:30:48 +0300 Subject: [PATCH 2/6] fix(material/form-field): adjust text --- src/material/form-field/form-field.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts index 2a64ffae9b36..b9554cd5690b 100644 --- a/src/material/form-field/form-field.ts +++ b/src/material/form-field/form-field.ts @@ -706,7 +706,7 @@ export class MatFormField // 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 the element is either a shadow root or the document itslef if (rootNode instanceof ShadowRoot || rootNode === document) { return true; } From c1c588c1cc4003dbdeb47038d17fa89c43bc311e Mon Sep 17 00:00:00 2001 From: Dumitrescu Alexandru <89769969+adumitrescu-plenty@users.noreply.github.com> Date: Tue, 28 May 2024 09:26:17 +0300 Subject: [PATCH 3/6] fix(material/form-field): requested changes --- src/material/form-field/form-field.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts index b9554cd5690b..070a4a6f2fab 100644 --- a/src/material/form-field/form-field.ts +++ b/src/material/form-field/form-field.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ import {Directionality} from '@angular/cdk/bidi'; -import {Platform} from '@angular/cdk/platform'; +import {Platform, _getShadowRoot} from '@angular/cdk/platform'; import { AfterContentChecked, AfterContentInit, @@ -706,8 +706,7 @@ export class MatFormField // 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 document itslef - if (rootNode instanceof ShadowRoot || rootNode === document) { + if (rootNode === document || _getShadowRoot(element)) { return true; } } From 7a445e8b2b6c6687f06016c827b681bd7a8eaf5c Mon Sep 17 00:00:00 2001 From: Dumitrescu Alexandru <89769969+adumitrescu-plenty@users.noreply.github.com> Date: Tue, 28 May 2024 12:55:58 +0300 Subject: [PATCH 4/6] fix(material/form-field): adjustments for shadow root --- src/material/form-field/form-field.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts index 070a4a6f2fab..2d00d8f7446d 100644 --- a/src/material/form-field/form-field.ts +++ b/src/material/form-field/form-field.ts @@ -701,19 +701,23 @@ export class MatFormField /** Checks whether the form field is attached to the DOM. */ private _isAttachedToDom(): boolean { const element: HTMLElement = this._elementRef.nativeElement; + const shadowRoot = _getShadowRoot(element); if (element.getRootNode) { const rootNode = element.getRootNode(); // 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 (rootNode === document || _getShadowRoot(element)) { + if (rootNode === document || shadowRoot) { 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); + // If the element is not in the document nor in the shaodw root it means that the element is not yet rendered. + return ( + document.documentElement!.contains(element) || + (shadowRoot != null && shadowRoot.contains(element)) + ); } } From 003218ecd6d3dde3ff9d762baa40fa1cd01e5e0f Mon Sep 17 00:00:00 2001 From: Dumitrescu Alexandru <89769969+adumitrescu-plenty@users.noreply.github.com> Date: Tue, 28 May 2024 13:58:51 +0300 Subject: [PATCH 5/6] fix(material/form-field): adjust shadow node check --- src/material/form-field/form-field.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts index 2d00d8f7446d..3ffe8ed3125e 100644 --- a/src/material/form-field/form-field.ts +++ b/src/material/form-field/form-field.ts @@ -701,15 +701,12 @@ export class MatFormField /** Checks whether the form field is attached to the DOM. */ private _isAttachedToDom(): boolean { const element: HTMLElement = this._elementRef.nativeElement; - const shadowRoot = _getShadowRoot(element); if (element.getRootNode) { const rootNode = element.getRootNode(); // 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 (rootNode === document || shadowRoot) { - return true; - } + if (rootNode && rootNode !== element && rootNode === document) { + return true; } } // Otherwise fall back to checking if it's in the document. This doesn't account for @@ -717,7 +714,7 @@ export class MatFormField // If the element is not in the document nor in the shaodw root it means that the element is not yet rendered. return ( document.documentElement!.contains(element) || - (shadowRoot != null && shadowRoot.contains(element)) + document.documentElement!.contains(_getShadowRoot(element)) ); } } From 4a9289983fd6df8002f967a730afd2ea760f3c77 Mon Sep 17 00:00:00 2001 From: Dumitrescu Alexandru <89769969+adumitrescu-plenty@users.noreply.github.com> Date: Tue, 28 May 2024 16:09:43 +0300 Subject: [PATCH 6/6] fix(material/form-field): adjust logic Simplify the method --- src/material/form-field/form-field.ts | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts index 3ffe8ed3125e..ca68a26f677a 100644 --- a/src/material/form-field/form-field.ts +++ b/src/material/form-field/form-field.ts @@ -701,20 +701,13 @@ export class MatFormField /** Checks whether the form field is attached to the DOM. */ private _isAttachedToDom(): boolean { 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, - // the closest shadow root or an element that is not yet rendered, otherwise it'll be the element itself. - if (rootNode && rootNode !== element && 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 nor in the shaodw root it means that the element is not yet rendered. + const rootNode = element.getRootNode(); + // 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. return ( - document.documentElement!.contains(element) || - document.documentElement!.contains(_getShadowRoot(element)) + rootNode && + rootNode !== element && + (rootNode === document || rootNode === _getShadowRoot(element)) ); } }