fix(overlays): presenting an overlay does not create nested elements (#26154)

Resolves #26117
This commit is contained in:
Sean Perkins
2022-11-02 16:57:22 -04:00
committed by GitHub
parent 1f7fc8f05c
commit bb005956ea
3 changed files with 58 additions and 8 deletions

View File

@@ -87,14 +87,22 @@ export const CoreDelegate = () => {
await new Promise((resolve) => componentOnReady(el, resolve));
} else if (BaseComponent.children.length > 0) {
// If there is no component, then we need to create a new parent
// element to apply the css classes to.
const el = BaseComponent.ownerDocument?.createElement('div');
cssClasses.forEach((c) => el.classList.add(c));
// Move each child from the original template to the new parent element.
el.append(...BaseComponent.children);
// Append the new parent element to the original parent element.
BaseComponent.appendChild(el);
const root = BaseComponent.children[0] as HTMLElement;
if (!root.classList.contains('ion-delegate-host')) {
/**
* If the root element is not a delegate host, it means
* that the overlay has not been presented yet and we need
* to create the containing element with the specified classes.
*/
const el = BaseComponent.ownerDocument?.createElement('div');
// Add a class to track if the root element was created by the delegate.
el.classList.add('ion-delegate-host');
cssClasses.forEach((c) => el.classList.add(c));
// Move each child from the original template to the new parent element.
el.append(...BaseComponent.children);
// Append the new parent element to the original parent element.
BaseComponent.appendChild(el);
}
}
/**