fix: uui-popover container scroll event (#713)

* look for scroll parent and listen for scroll

* update story

* make eventlisteners passive and remove in disconnecedCallback

Author: JesmoDev

packages/uui-popover-container/lib/uui-popover-container.element.ts

@@ -69,6 +69,7 @@ export class UUIPopoverContainerElement extends LitElement {
   _actualPlacement: PopoverContainerPlacement = this._placement;
 
   #targetElement: HTMLElement | null = null;
+  #scrollParents: Element[] = [];
 
   connectedCallback(): void {
     //TODO: Remove this polyfill when firefox supports the new popover API
@@ -85,6 +86,7 @@ export class UUIPopoverContainerElement extends LitElement {
   disconnectedCallback(): void {
     super.disconnectedCallback();
     this.removeEventListener('beforetoggle', this.#onBeforeToggle);
+    this.#stopScrollListener();
   }
 
   #onBeforeToggle = (event: any) => {
@@ -96,6 +98,8 @@ export class UUIPopoverContainerElement extends LitElement {
       this.id
     );
 
+    this.#getScrollParents();
+
     // Dispatch a custom event that can be listened to by the popover target.
     // Mostly used for UUIButton.
     this.#targetElement?.dispatchEvent(
@@ -110,11 +114,11 @@ export class UUIPopoverContainerElement extends LitElement {
     );
 
     if (!this._open) {
-      document.removeEventListener('scroll', this.#initUpdate);
+      this.#stopScrollListener();
       return;
     }
 
-    document.addEventListener('scroll', this.#initUpdate);
+    this.#startScrollListener();
 
     requestAnimationFrame(() => {
       this.#initUpdate();
@@ -305,6 +309,52 @@ export class UUIPopoverContainerElement extends LitElement {
       `${oppositeDirection}-${position}` as PopoverContainerPlacement;
   }
 
+  #startScrollListener() {
+    this.#scrollParents.forEach(el => {
+      el.addEventListener('scroll', this.#initUpdate, { passive: true });
+    });
+    document.addEventListener('scroll', this.#initUpdate, { passive: true });
+  }
+  #stopScrollListener() {
+    this.#scrollParents.forEach(el => {
+      el.removeEventListener('scroll', this.#initUpdate);
+    });
+    document.removeEventListener('scroll', this.#initUpdate);
+  }
+
+  #getScrollParents(): any {
+    if (!this.#targetElement) return;
+
+    let style = getComputedStyle(this.#targetElement);
+    if (style.position === 'fixed') {
+      return;
+    }
+
+    const includeHidden = false;
+    const excludeStaticParent = style.position === 'absolute';
+    const overflowRegex = includeHidden
+      ? /(auto|scroll|hidden)/
+      : /(auto|scroll)/;
+
+    let el = this.#targetElement;
+    while ((el = el.parentElement as HTMLElement)) {
+      style = getComputedStyle(el);
+
+      if (excludeStaticParent && style.position === 'static') {
+        continue;
+      }
+      if (
+        overflowRegex.test(style.overflow + style.overflowY + style.overflowX)
+      ) {
+        this.#scrollParents.push(el);
+      }
+      if (style.position === 'fixed') {
+        return;
+      }
+    }
+    this.#scrollParents.push(document.body);
+  }
+
   render() {
     return html`<slot></slot>`;
   }

packages/uui-popover-container/lib/uui-popover-container.story.ts

@@ -158,3 +158,61 @@ export const Tooltip: Story = {
     </uui-popover-container>
   `,
 };
+
+export const InsideScrollContainer: Story = {
+  args: {
+    placement: 'bottom-start',
+    margin: 0,
+  },
+  argTypes: {
+    open: {
+      control: false,
+    },
+    placement: {
+      options: [
+        'auto',
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'right',
+        'right-start',
+        'right-end',
+        'left',
+        'left-start',
+        'left-end',
+      ],
+    },
+  },
+  render: args => html`
+    <div style="height: 500px; overflow: auto; outline: 1px solid black">
+      <div
+        style="width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">
+        <div style="height: 150px"></div>
+        <uui-button
+          id="popover-button"
+          popovertarget="popover-container"
+          look="primary"
+          label="Open popover">
+          Open popover
+        </uui-button>
+        <div style="height: 150px"></div>
+        <div style="height: 150px"></div>
+      </div>
+      <div style="height: 400px"></div>
+    </div>
+    <uui-popover-container
+      id="popover-container"
+      popover
+      placement=${args.placement}
+      margin=${args.margin}>
+      <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
+      </div>
+    </uui-popover-container>
+  `,
+};