fix(overlays): remove _contentNodeWrapper on teardown

packages/field/test/FormControlMixin.test.js

@@ -78,7 +78,6 @@ describe('FormControlMixin', () => {
     const el = wrapper.querySelector(elem);
 
     const { _inputNode } = el;
-    console.log('_inputNode', _inputNode);
 
     // 1. addToAriaLabelledBy()
     // external inputs should go in order defined by user

packages/overlays/src/OverlayController.js

@@ -554,6 +554,7 @@ export class OverlayController {
 
   teardown() {
     this._handleFeatures({ phase: 'teardown' });
+    this._contentNodeWrapper.remove();
   }
 
   /**

packages/overlays/src/OverlayMixin.js

@@ -142,6 +142,7 @@ export const OverlayMixin = dedupeMixin(
         }
         this._overlayCtrl.contentNode.removeEventListener(this.closeEventName, this.__close);
         this._teardownOpenCloseListeners();
+        this._overlayCtrl.teardown();
       }
 
       get _overlayInvokerNode() {

packages/overlays/stories/index.stories.js

@@ -80,6 +80,10 @@ const overlayDemoStyle = css`
     padding: 8px;
   }
 
+  .overlay lion-button {
+    color: black;
+  }
+
   .demo-popup {
     padding: 10px;
     border: 1px solid black;
@@ -102,16 +106,18 @@ customElements.define(
     }
 
     _setupOpenCloseListeners() {
-      this.__close = () => {
-        this.opened = false;
-      };
       this.__toggle = () => {
+        console.log('toggle!');
         this.opened = !this.opened;
       };
+
+      console.log(this._overlayCtrl.invokerNode, this, this.__toggle);
       this._overlayCtrl.invokerNode.addEventListener('click', this.__toggle);
+      this._overlayCtrl.invokerNode.addEventListener('click', () => console.log('ay'));
     }
 
     _teardownOpenCloseListeners() {
+      console.log('teardown for', this);
       this._overlayCtrl.invokerNode.removeEventListener('click', this.__toggle);
     }
 
@@ -191,6 +197,41 @@ storiesOf('Overlay System | Overlay as a WC', module)
       </div>
     `;
   })
+  .add(
+    'Nested overlays',
+    () => html`
+      <style>
+        ${overlayDemoStyle}
+      </style>
+      <lion-demo-overlay .config=${{ ...withModalDialogConfig() }}>
+        <lion-button slot="invoker">Overlay</lion-button>
+        <div slot="content" class="overlay">
+          <div>
+            Hello! This is a notification.
+            <lion-button
+              @click=${e =>
+                e.target.dispatchEvent(new Event('demo-overlay-close', { bubbles: true }))}
+              >Close</lion-button
+            >
+            <lion-demo-overlay
+              .config=${{ ...withModalDialogConfig(), viewportConfig: { placement: 'top' } }}
+            >
+              <lion-button slot="invoker">Open child</lion-button>
+              <div slot="content" class="overlay">
+                Hello! You can close this notification here:
+                <lion-button
+                  class="close-button"
+                  @click=${e =>
+                    e.target.dispatchEvent(new Event('demo-overlay-close', { bubbles: true }))}
+                  >⨯</lion-button
+                >
+              </div>
+            </lion-demo-overlay>
+          </div>
+        </div>
+      </lion-demo-overlay>
+    `,
+  )
   .add(
     'Local placementMode',
     () => html`

packages/overlays/test/OverlayController.test.js

@@ -162,6 +162,19 @@ describe('OverlayController', () => {
     });
   });
 
+  // TODO: Add teardown feature tests
+  describe('Teardown', () => {
+    it('removes the contentNodeWrapper from global rootnode upon teardown', async () => {
+      const ctrl = new OverlayController({
+        ...withGlobalTestConfig(),
+      });
+
+      expect(ctrl.manager.globalRootNode.children.length).to.equal(1);
+      ctrl.teardown();
+      expect(ctrl.manager.globalRootNode.children.length).to.equal(0);
+    });
+  });
+
   describe('Node Configuration', () => {
     it('accepts an .contentNode<Node> to directly set content', async () => {
       const ctrl = new OverlayController({