fix: hide overlay if position target element is hidden (#7454) (CP: 2…

…4.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>

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';

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;