From 33fae61491484487ef920373a013d9c802712277 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 2 Jul 2025 16:13:01 +0200
Subject: [PATCH 1/2] Fix stuck while loop where the checked element never got
 updated

---
 .../lib/uui-popover-container.element.ts        | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

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`<slot></slot>`;
   }

From cf0fd8173e6d5e79ac50c17d17421ca8f3696dd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 2 Jul 2025 20:16:19 +0200
Subject: [PATCH 2/2] improve story to cover issue

---
 .../lib/uui-popover-container-shadowdomtester.element.ts    | 6 ++++--
 .../lib/uui-popover-container.story.ts                      | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

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`<div
         style="height: 500px; overflow: auto; outline: 1px solid black">
         <div
-          style="width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">
+          style="position:relative; width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">
           <div style="height: 150px"></div>
           <uui-button
             id="popover-button"
+            style="position: absolute; top: 50px; left: 50px;"
             popovertarget="popover-container"
             look="primary"
             label="Open popover">
@@ -28,7 +29,8 @@ export class UUIPopoverContainerShadowDomTesterElement extends LitElement {
         <div
           style="width: 100%; background-color: var(--uui-color-surface); max-width: 200px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-4); border-radius: var(--uui-border-radius); font-size: 0.9rem;">
           <h3>Scroll!</h3>
-          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
         </div>
       </uui-popover-container>`;
   }
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`
     <div style="height: 500px; overflow: auto; outline: 1px solid black">
       <div
-        style="width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">
+        style="position:static; width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">
         <div style="height: 150px"></div>
         <uui-popover-container-shadowdomtester></uui-popover-container-shadowdomtester>
         <div style="height: 150px"></div>