diff --git a/packages/field/test/FormControlMixin.test.js b/packages/field/test/FormControlMixin.test.js index 074bf0972..df30e8ae9 100644 --- a/packages/field/test/FormControlMixin.test.js +++ b/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 diff --git a/packages/overlays/src/OverlayController.js b/packages/overlays/src/OverlayController.js index 299975a4e..f9e8d60b4 100644 --- a/packages/overlays/src/OverlayController.js +++ b/packages/overlays/src/OverlayController.js @@ -554,6 +554,7 @@ export class OverlayController { teardown() { this._handleFeatures({ phase: 'teardown' }); + this._contentNodeWrapper.remove(); } /** diff --git a/packages/overlays/src/OverlayMixin.js b/packages/overlays/src/OverlayMixin.js index d11deeb85..7b819e592 100644 --- a/packages/overlays/src/OverlayMixin.js +++ b/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() { diff --git a/packages/overlays/stories/index.stories.js b/packages/overlays/stories/index.stories.js index eefceeb2d..60c060dba 100644 --- a/packages/overlays/stories/index.stories.js +++ b/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) `; }) + .add( + 'Nested overlays', + () => html` + + + Overlay +
+
+ Hello! This is a notification. + + e.target.dispatchEvent(new Event('demo-overlay-close', { bubbles: true }))} + >Close + + Open child +
+ Hello! You can close this notification here: + + e.target.dispatchEvent(new Event('demo-overlay-close', { bubbles: true }))} + >тип +
+
+
+
+
+ `, + ) .add( 'Local placementMode', () => html` diff --git a/packages/overlays/test/OverlayController.test.js b/packages/overlays/test/OverlayController.test.js index ec4bb8526..e31b59a57 100644 --- a/packages/overlays/test/OverlayController.test.js +++ b/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 to directly set content', async () => { const ctrl = new OverlayController({