From 2a989f47cf7ab32ed8189bf88c0d6d35870ce24b Mon Sep 17 00:00:00 2001
From: Gyulai Levente <47368351+gyulus3@users.noreply.github.com>
Date: Tue, 12 Nov 2024 17:24:21 +0100
Subject: [PATCH] fix(overlays): clicking outside iframe not closing the
 overlay

---
 .changeset/spotty-penguins-taste.md                 |  5 +++++
 .../ui/components/overlays/src/OverlayController.js | 13 +++++++++++++
 .../overlays/test/OverlayController.test.js         | 13 +++++++++++++
 3 files changed, 31 insertions(+)
 create mode 100644 .changeset/spotty-penguins-taste.md

diff --git a/.changeset/spotty-penguins-taste.md b/.changeset/spotty-penguins-taste.md
new file mode 100644
index 000000000..500bc8c5a
--- /dev/null
+++ b/.changeset/spotty-penguins-taste.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[overlays] now closes when iframe loses focus
diff --git a/packages/ui/components/overlays/src/OverlayController.js b/packages/ui/components/overlays/src/OverlayController.js
index 9879c49ef..e6a642cf6 100644
--- a/packages/ui/components/overlays/src/OverlayController.js
+++ b/packages/ui/components/overlays/src/OverlayController.js
@@ -1285,6 +1285,14 @@ export class OverlayController extends EventTarget {
           wasMouseUpInside = false;
         });
       };
+
+      /** @type {EventListenerOrEventListenerObject} */
+      this.__onWindowBlur = () => {
+        // When the current window loses the focus (clicking outside iframe) the overlay gets hidden
+        setTimeout(() => {
+          this.hide();
+        });
+      };
     }
 
     this.contentWrapperNode[addOrRemoveListener](
@@ -1321,6 +1329,11 @@ export class OverlayController extends EventTarget {
       (this.__onDocumentMouseUp),
       true,
     );
+    window[addOrRemoveListener](
+      'blur',
+      /** @type {EventListenerOrEventListenerObject} */
+      (this.__onWindowBlur),
+    );
   }
 
   /**
diff --git a/packages/ui/components/overlays/test/OverlayController.test.js b/packages/ui/components/overlays/test/OverlayController.test.js
index 353374002..d1cfc27f2 100644
--- a/packages/ui/components/overlays/test/OverlayController.test.js
+++ b/packages/ui/components/overlays/test/OverlayController.test.js
@@ -1092,6 +1092,19 @@ describe('OverlayController', () => {
 
         expect(ctrl.isShown).to.be.true;
       });
+
+      it('hides when window is blurred (useful for iframes)', async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          hidesOnOutsideClick: true,
+        });
+        await ctrl.show();
+
+        window.dispatchEvent(new Event('blur'));
+        await aTimeout(0);
+
+        expect(ctrl.isShown).to.be.false;
+      });
     });
 
     describe('elementToFocusAfterHide', () => {