From 016d8e5265765af4ed28cfe6e040b3ac35beca73 Mon Sep 17 00:00:00 2001 From: Levente Gyulai Date: Tue, 23 Jul 2024 13:21:15 +0200 Subject: [PATCH 1/4] fix: overlay does not close when clicking outside iframe --- .../ui/components/overlays/src/OverlayController.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/ui/components/overlays/src/OverlayController.js b/packages/ui/components/overlays/src/OverlayController.js index c2801589b5..e55d22964e 100644 --- a/packages/ui/components/overlays/src/OverlayController.js +++ b/packages/ui/components/overlays/src/OverlayController.js @@ -1238,6 +1238,12 @@ 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 + this.hide(); + }; } this.contentWrapperNode[addOrRemoveListener]( @@ -1274,6 +1280,12 @@ export class OverlayController extends EventTarget { (this.__onDocumentMouseUp), true, ); + window[addOrRemoveListener]( + 'blur', + /** @type {EventListenerOrEventListenerObject} */ + (this.__onWindowBlur), + true, + ); } /** From e29e3bbbccfd6ac42c22b423842ee610a80f75d1 Mon Sep 17 00:00:00 2001 From: Levente Gyulai Date: Tue, 23 Jul 2024 13:27:48 +0200 Subject: [PATCH 2/4] doc: add changeset --- .changeset/spotty-penguins-taste.md | 5 +++++ 1 file changed, 5 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 0000000000..500bc8c5a3 --- /dev/null +++ b/.changeset/spotty-penguins-taste.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +[overlays] now closes when iframe loses focus From 4758231e4157c22331d53977c70b2d2bea25cab4 Mon Sep 17 00:00:00 2001 From: Levente Gyulai Date: Tue, 23 Jul 2024 16:28:46 +0200 Subject: [PATCH 3/4] fix: hide overlay in manager only if exists --- packages/ui/components/overlays/src/OverlayController.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/ui/components/overlays/src/OverlayController.js b/packages/ui/components/overlays/src/OverlayController.js index e55d22964e..9bb7fa713e 100644 --- a/packages/ui/components/overlays/src/OverlayController.js +++ b/packages/ui/components/overlays/src/OverlayController.js @@ -1242,7 +1242,12 @@ export class OverlayController extends EventTarget { /** @type {EventListenerOrEventListenerObject} */ this.__onWindowBlur = () => { // When the current window loses the focus (clicking outside iframe) the overlay gets hidden - this.hide(); + setTimeout(() => { + const ctrlManaged = this.manager.list.includes(this); + if (ctrlManaged) { + this.hide(); + } + }); }; } From 1a78c388575aa1f612a4a9b94f3537105c922d6e Mon Sep 17 00:00:00 2001 From: Levente Gyulai Date: Wed, 24 Jul 2024 16:13:35 +0200 Subject: [PATCH 4/4] fix: flickering overlay on hide, simplify event listener --- packages/ui/components/overlays/src/OverlayController.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/ui/components/overlays/src/OverlayController.js b/packages/ui/components/overlays/src/OverlayController.js index 9bb7fa713e..e9e15f044a 100644 --- a/packages/ui/components/overlays/src/OverlayController.js +++ b/packages/ui/components/overlays/src/OverlayController.js @@ -1243,10 +1243,7 @@ export class OverlayController extends EventTarget { this.__onWindowBlur = () => { // When the current window loses the focus (clicking outside iframe) the overlay gets hidden setTimeout(() => { - const ctrlManaged = this.manager.list.includes(this); - if (ctrlManaged) { - this.hide(); - } + this.hide(); }); }; } @@ -1289,7 +1286,6 @@ export class OverlayController extends EventTarget { 'blur', /** @type {EventListenerOrEventListenerObject} */ (this.__onWindowBlur), - true, ); }