Skip to content

Commit

Permalink
fix(form-field): outline label position
Browse files Browse the repository at this point in the history
Fixes the outline label position when a prefix is present and the form field is not yet rendered.

Fixes angular#29064
  • Loading branch information
adumitrescu-plenty committed May 27, 2024
1 parent 263dadf commit e1770c1
Showing 1 changed file with 9 additions and 3 deletions.
12 changes: 9 additions & 3 deletions src/material/form-field/form-field.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

0 comments on commit e1770c1

Please sign in to comment.