fix: do not close popover when it is just moved in DOM (#8208)

vaadin · Nov 22, 2024 · 94121c0 · 94121c0
1 parent 83bca26
commit 94121c0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/popover/src/vaadin-popover.js b/packages/popover/src/vaadin-popover.js
@@ -532,7 +532,13 @@ class Popover extends PopoverPositionMixin(
 
     document.documentElement.removeEventListener('click', this.__onGlobalClick, true);
 
-    this._openedStateController.close(true);
+    // Automatically close popover when it is removed from DOM
+    // Avoid closing if the popover is just moved in the DOM
+    queueMicrotask(() => {
+      if (!this.isConnected) {
+        this._openedStateController.close(true);
+      }
+    });
   }
 
   /**

diff --git a/packages/popover/test/basic.test.js b/packages/popover/test/basic.test.js
@@ -232,6 +232,17 @@ describe('popover', () => {
       expect(overlay.opened).to.be.false;
     });
 
+    it('should not close overlay when popover is moved in DOM', async () => {
+      target.click();
+      await nextRender();
+
+      const parent = popover.parentElement;
+      popover.remove();
+      parent.appendChild(popover);
+      await nextRender();
+      expect(overlay.opened).to.be.true;
+    });
+
     it('should remove document click listener when popover is detached', async () => {
       const spy = sinon.spy(document.documentElement, 'removeEventListener');
       popover.remove();