diff --git a/packages/uui-popover-container/lib/uui-popover-container-shadowdomtester.element.ts b/packages/uui-popover-container/lib/uui-popover-container-shadowdomtester.element.ts
index 7bda7727f..5284c88c5 100644
--- a/packages/uui-popover-container/lib/uui-popover-container-shadowdomtester.element.ts
+++ b/packages/uui-popover-container/lib/uui-popover-container-shadowdomtester.element.ts
@@ -10,10 +10,11 @@ export class UUIPopoverContainerShadowDomTesterElement extends LitElement {
return html`
+ style="position:relative; width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">
@@ -28,7 +29,8 @@ export class UUIPopoverContainerShadowDomTesterElement extends LitElement {
Scroll!
- Scrolling in any of the 2 boxes should trigger an update
+ Scrolling in any of the 2 boxes that are in a shadow-dom inside 2
+ boxes should trigger an update
`;
}
diff --git a/packages/uui-popover-container/lib/uui-popover-container.element.ts b/packages/uui-popover-container/lib/uui-popover-container.element.ts
index 38aa0a3d2..4c8590261 100644
--- a/packages/uui-popover-container/lib/uui-popover-container.element.ts
+++ b/packages/uui-popover-container/lib/uui-popover-container.element.ts
@@ -359,6 +359,7 @@ export class UUIPopoverContainerElement extends LitElement {
style = getComputedStyle(el);
if (excludeStaticParent && style.position === 'static') {
+ el = this.#getAncestorElement(el);
continue;
}
if (
@@ -370,16 +371,20 @@ export class UUIPopoverContainerElement extends LitElement {
return;
}
- if (el.parentElement) {
- el = el.parentElement;
- } else {
- // If we had no parentElement, then check for shadow roots:
- el = (el.getRootNode() as any)?.host;
- }
+ el = this.#getAncestorElement(el);
}
this.#scrollParents.push(document.body);
}
+ #getAncestorElement(el: HTMLElement | null): HTMLElement | null {
+ if (el?.parentElement) {
+ return el.parentElement;
+ } else {
+ // If we had no parentElement, then check for shadow roots:
+ return (el?.getRootNode() as any)?.host;
+ }
+ }
+
render() {
return html``;
}
diff --git a/packages/uui-popover-container/lib/uui-popover-container.story.ts b/packages/uui-popover-container/lib/uui-popover-container.story.ts
index ae48b3d3f..dc94ff36f 100644
--- a/packages/uui-popover-container/lib/uui-popover-container.story.ts
+++ b/packages/uui-popover-container/lib/uui-popover-container.story.ts
@@ -230,7 +230,7 @@ export const InsideShadowDOMScrollContainer: Story = {
render: () => html`
+ style="position:static; width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">