diff --git a/packages/popover/src/vaadin-popover.js b/packages/popover/src/vaadin-popover.js index cb4908469a..6545d1861c 100644 --- 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 index e39ec93ed2..5a4dff27c7 100644 --- 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();