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

* 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

packages/overlay/src/vaadin-overlay-position-mixin.js

@@ -219,6 +219,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.test.js

@@ -111,6 +111,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;