From 37fe7263e3a0ae700349ff4f4b7b1b3968e9f82e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Thu, 26 Oct 2023 22:38:46 +1300
Subject: [PATCH] beforeToggleProxy

---
 .../lib/uui-popover-container.element.ts      | 55 ++++++++++++-------
 1 file changed, 34 insertions(+), 21 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 14acb0ff5..4e95ff03d 100644
--- a/packages/uui-popover-container/lib/uui-popover-container.element.ts
+++ b/packages/uui-popover-container/lib/uui-popover-container.element.ts
@@ -80,6 +80,21 @@ export class UUIPopoverContainerElement extends LitElement {
     //TODO: Remove polyfill when popover api is supported in firefox
     if (!this.#browserIsSupported) {
       this.removeEventListener('focusout', this.#onFocusOut);
+      this.removeEventListener('beforetoggle', this.#onBeforeToggle);
+      const onBeforeToggleProxy = (event: any) => {
+        this.dispatchEvent(
+          new CustomEvent('beforetoggle-polyfill', {
+            bubbles: false,
+            composed: false,
+            detail: {
+              oldState: event.oldState,
+              newState: event.newState,
+            },
+          })
+        );
+        this.#onBeforeToggle(event);
+      };
+
       const findParentPopover = (element: HTMLElement): HTMLElement | null => {
         if (!element.parentElement) return null;
         if (element.parentElement?.tagName === 'UUI-POPOVER-CONTAINER') {
@@ -88,12 +103,18 @@ export class UUIPopoverContainerElement extends LitElement {
         return findParentPopover(element.parentElement);
       };
 
-      const parent = findParentPopover(this);
+      const onBeforeTogglePolyfill = (event: any) => {
+        if (event.detail.newState === 'closed') {
+          this.hidePopover();
+        }
+      };
 
       this.style.display = 'none';
       this.style.position = 'fixed';
       this.style.inset = '0';
       this.showPopover = () => {
+        // @ts-ignore
+        this.polyfillParent = findParentPopover(this);
         if (
           this.parentNode !== document.body &&
           // @ts-ignore
@@ -104,25 +125,29 @@ export class UUIPopoverContainerElement extends LitElement {
           // @ts-ignore
           this.hasBeenMovedToBody = true;
         }
-        this.#onBeforeToggle({
+        onBeforeToggleProxy({
           oldState: 'closed',
           newState: 'open',
         });
         this.style.display = 'block';
+        // @ts-ignore
+        this.polyfillParent?.addEventListener(
+          'beforetoggle-polyfill',
+          onBeforeTogglePolyfill
+        );
       };
       this.hidePopover = () => {
-        this.#onBeforeToggle({
+        // @ts-ignore
+        this.polyfillParent?.removeEventListener(
+          'beforetoggle-polyfill',
+          onBeforeTogglePolyfill
+        );
+        onBeforeToggleProxy({
           oldState: 'open',
           newState: 'closed',
         });
         this.style.display = 'none';
       };
-
-      parent?.addEventListener('beforetoggle-polyfill', (event: any) => {
-        if (event.detail.newState === 'closed') {
-          this.hidePopover();
-        }
-      });
     }
   }
 
@@ -144,18 +169,6 @@ export class UUIPopoverContainerElement extends LitElement {
   #onBeforeToggle = async (event: any) => {
     this._open = event.newState === 'open';
 
-    //TODO: Remove this dispatch when popover api is supported in firefox
-    this.dispatchEvent(
-      new CustomEvent('beforetoggle-polyfill', {
-        bubbles: false,
-        composed: false,
-        detail: {
-          oldState: event.oldState,
-          newState: event.newState,
-        },
-      })
-    );
-
     this.#targetElement = findAncestorByAttributeValue(
       this,
       'popovertarget',