Fix stuck while loop where the checked element never gets updated (#1140)

* Fix stuck while loop where the checked element never got updated

* improve story to cover issue

---------

Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>

Author: madsrasmussen

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

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

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>