From dc6c6a7f02be8396cff9848fe9455a405b73aa62 Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Tue, 28 May 2024 12:45:27 +0200
Subject: [PATCH] fix: hide overlay if position target element is hidden
 (#7454) (CP: 24.4) (#7456)

* fix: hide overlay if position target element is hidden

If the target element is hidden, either by having `display: none` set to
itself of any of its parents, a resize observer for that element is
triggered.

This change adds a check for the target element size on the resize
observer callback and closes the overlay in case the element is hidden.

Fixes #7437

Co-authored-by: Diego Cardoso <diego@vaadin.com>
---
 .../overlay/src/vaadin-overlay-position-mixin.js     |  5 +++++
 packages/overlay/test/position-mixin.common.js       | 12 ++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/packages/overlay/src/vaadin-overlay-position-mixin.js b/packages/overlay/src/vaadin-overlay-position-mixin.js
index 194eafa67d..4cfa450798 100644
--- a/packages/overlay/src/vaadin-overlay-position-mixin.js
+++ b/packages/overlay/src/vaadin-overlay-position-mixin.js
@@ -220,6 +220,11 @@ export const PositionMixin = (superClass) =>
 
       const targetRect = this.positionTarget.getBoundingClientRect();
 
+      if (targetRect.width === 0 && targetRect.height === 0 && this.opened) {
+        this.opened = false;
+        return;
+      }
+
       // Detect the desired alignment and update the layout accordingly
       const shouldAlignStartVertically = this.__shouldAlignStartVertically(targetRect);
       this.style.justifyContent = shouldAlignStartVertically ? 'flex-start' : 'flex-end';
diff --git a/packages/overlay/test/position-mixin.common.js b/packages/overlay/test/position-mixin.common.js
index 5bfd9876df..bfd47eafef 100644
--- a/packages/overlay/test/position-mixin.common.js
+++ b/packages/overlay/test/position-mixin.common.js
@@ -93,6 +93,18 @@ describe('position mixin', () => {
     expect(overlay.$.overlay.scrollTop).to.equal(100);
   });
 
+  it('should close overlay if element is hidden', async () => {
+    target.style.display = 'none';
+    await nextRender();
+    expect(overlay.opened).to.be.false;
+  });
+
+  it('should close overlay if parent element is hidden', async () => {
+    target.parentElement.style.display = 'none';
+    await nextRender();
+    expect(overlay.opened).to.be.false;
+  });
+
   describe('vertical align top', () => {
     beforeEach(() => {
       overlay.verticalAlign = TOP;