From da87445f33f4a168449ef6e37fc4244f16a0dc00 Mon Sep 17 00:00:00 2001
From: Joren Broekema <joren.broekema@ing.com>
Date: Wed, 6 May 2020 15:40:35 +0200
Subject: [PATCH] fix(dialog): teardown open close listeners after initial
 update complete

---
 packages/dialog/src/LionDialog.js        |  4 ++--
 packages/dialog/test/lion-dialog.test.js | 28 ++++++++++++++++++++++--
 packages/overlays/src/OverlayMixin.js    | 11 ++++++----
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/packages/dialog/src/LionDialog.js b/packages/dialog/src/LionDialog.js
index 905576f01..f5a04df12 100644
--- a/packages/dialog/src/LionDialog.js
+++ b/packages/dialog/src/LionDialog.js
@@ -1,5 +1,5 @@
-import { withModalDialogConfig, OverlayMixin } from '@lion/overlays';
-import { LitElement, html } from '@lion/core';
+import { html, LitElement } from '@lion/core';
+import { OverlayMixin, withModalDialogConfig } from '@lion/overlays';
 
 export class LionDialog extends OverlayMixin(LitElement) {
   // eslint-disable-next-line class-methods-use-this
diff --git a/packages/dialog/test/lion-dialog.test.js b/packages/dialog/test/lion-dialog.test.js
index 70932dcac..dc9395124 100644
--- a/packages/dialog/test/lion-dialog.test.js
+++ b/packages/dialog/test/lion-dialog.test.js
@@ -1,6 +1,5 @@
-import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import { runOverlayMixinSuite } from '@lion/overlays/test-suites/OverlayMixin.suite.js';
-
+import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import '../lion-dialog.js';
 
 describe('lion-dialog', () => {
@@ -30,5 +29,30 @@ describe('lion-dialog', () => {
 
       expect(el.opened).to.be.true;
     });
+
+    it('supports nested overlays', async () => {
+      const el = await fixture(html`
+        <lion-dialog>
+          <div slot="content">
+            open nested overlay:
+            <lion-dialog>
+              <div slot="content">
+                Nested content
+              </div>
+              <button slot="invoker">nested invoker button</button>
+            </lion-dialog>
+          </div>
+          <button slot="invoker">invoker button</button>
+        </lion-dialog>
+      `);
+
+      el._overlayInvokerNode.click();
+      expect(el.opened).to.be.true;
+
+      const wrapperNode = Array.from(document.querySelector('.global-overlays').children)[1];
+      const nestedDialog = wrapperNode.querySelector('lion-dialog');
+      nestedDialog._overlayInvokerNode.click();
+      expect(nestedDialog.opened).to.be.true;
+    });
   });
 });
diff --git a/packages/overlays/src/OverlayMixin.js b/packages/overlays/src/OverlayMixin.js
index a1e2cc0ad..163127b8f 100644
--- a/packages/overlays/src/OverlayMixin.js
+++ b/packages/overlays/src/OverlayMixin.js
@@ -147,8 +147,8 @@ export const OverlayMixin = dedupeMixin(
         if (this._overlayCtrl) {
           this.__tornDown = true;
           this.__overlayContentNodeWrapperBeforeTeardown = this._overlayContentNodeWrapper;
-          this._teardownOverlayCtrl();
         }
+        this._teardownOverlayCtrl();
       }
 
       get _overlayInvokerNode() {
@@ -206,10 +206,13 @@ export const OverlayMixin = dedupeMixin(
         this.__overlaySetupCompleteResolve();
       }
 
-      _teardownOverlayCtrl() {
+      async _teardownOverlayCtrl() {
+        if (this._overlayCtrl) {
+          this.__teardownSyncFromOverlayController();
+          this._overlayCtrl.teardown();
+        }
+        await this.updateComplete;
         this._teardownOpenCloseListeners();
-        this.__teardownSyncFromOverlayController();
-        this._overlayCtrl.teardown();
       }
 
       async _setOpenedWithoutPropertyEffects(newOpened) {