fix(overlays): clicking outside iframe not closing the overlay

ing-bank · Nov 12, 2024 · 2a989f4 · 2a989f4
1 parent a19096e
commit 2a989f4
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/.changeset/spotty-penguins-taste.md 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
@@ -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
@@ -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', () => {