fix: restore overlay opened state when moving within the DOM (#3648) (#…

…3665) Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>
vaadin · Apr 11, 2022 · 9f7cfe8 · 9f7cfe8
1 parent ba1b2b0
commit 9f7cfe8
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/packages/dialog/src/vaadin-dialog.js b/packages/dialog/src/vaadin-dialog.js
@@ -291,9 +291,20 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
     this.$.overlay.setProperties({ owner: this, renderer });
   }
 
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+    // Restore opened state if overlay was opened when disconnecting
+    if (this.__restoreOpened) {
+      this.opened = true;
+    }
+  }
+
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
+    // Close overlay and memorize opened state
+    this.__restoreOpened = this.opened;
     this.opened = false;
   }
 

diff --git a/packages/dialog/test/dialog.test.js b/packages/dialog/test/dialog.test.js
@@ -128,6 +128,14 @@ describe('vaadin-dialog', () => {
         dialog.parentNode.removeChild(dialog);
         expect(dialog.opened).to.be.false;
       });
+
+      it('should not close the overlay when moved within the DOM', () => {
+        const newParent = document.createElement('div');
+        document.body.appendChild(newParent);
+
+        newParent.appendChild(dialog);
+        expect(dialog.opened).to.be.true;
+      });
     });
 
     describe('modeless', () => {

diff --git a/packages/login/src/vaadin-login-overlay.js b/packages/login/src/vaadin-login-overlay.js
@@ -127,6 +127,11 @@ class LoginOverlay extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)
 
     this.$.vaadinLoginOverlayWrapper.addEventListener('vaadin-overlay-outside-click', this._preventClosingLogin);
     this.$.vaadinLoginOverlayWrapper.addEventListener('vaadin-overlay-escape-press', this._preventClosingLogin);
+
+    // Restore opened state if overlay was open when disconnecting
+    if (this.__restoreOpened) {
+      this.$.vaadinLoginOverlayWrapper.opened = true;
+    }
   }
 
   /** @protected */
@@ -135,6 +140,9 @@ class LoginOverlay extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)
 
     this.$.vaadinLoginOverlayWrapper.removeEventListener('vaadin-overlay-outside-click', this._preventClosingLogin);
     this.$.vaadinLoginOverlayWrapper.removeEventListener('vaadin-overlay-escape-press', this._preventClosingLogin);
+
+    // Close overlay and memorize opened state
+    this.__restoreOpened = this.$.vaadinLoginOverlayWrapper.opened;
     this.$.vaadinLoginOverlayWrapper.opened = false;
   }
 

diff --git a/packages/login/test/login-overlay.test.js b/packages/login/test/login-overlay.test.js
@@ -43,12 +43,20 @@ describe('opened overlay', () => {
 
   it('should set opened using attribute', () => {
     expect(overlay.opened).to.be.true;
-    expect(document.querySelector('vaadin-login-form-wrapper')).to.be.ok;
+    expect(document.querySelector('vaadin-login-form-wrapper')).to.exist;
   });
 
   it('should remove form wrapper when closed', () => {
     overlay.opened = false;
-    expect(document.querySelector('vaadin-login-form-wrapper')).to.be.not.ok;
+    expect(document.querySelector('vaadin-login-form-wrapper')).not.to.exist;
+  });
+
+  it('should not remove form wrapper when moved within DOM', () => {
+    const newParent = document.createElement('div');
+    document.body.appendChild(newParent);
+    newParent.appendChild(overlay);
+
+    expect(document.querySelector('vaadin-login-form-wrapper')).to.exist;
   });
 
   it('should propagate theme to a wrapper', () => {