ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(dialog): teardown open close listeners after initial update complete

Browse source
This commit is contained in:
Joren Broekema 2020-05-06 15:40:35 +02:00
parent 98ee0b2f89
commit da87445f33
3 changed files with 35 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/dialog/src/LionDialog.js
View file

@ -1,5 +1,5 @@
import { withModalDialogConfig, OverlayMixin } from '@lion/overlays'; import { html, LitElement } from '@lion/core';
import { LitElement, html } from '@lion/core'; import { OverlayMixin, withModalDialogConfig } from '@lion/overlays';
export class LionDialog extends OverlayMixin(LitElement) { export class LionDialog extends OverlayMixin(LitElement) {
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this

28
packages/dialog/test/lion-dialog.test.js
View file

@ -1,6 +1,5 @@
import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
import { runOverlayMixinSuite } from '@lion/overlays/test-suites/OverlayMixin.suite.js'; import { runOverlayMixinSuite } from '@lion/overlays/test-suites/OverlayMixin.suite.js';
import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
import '../lion-dialog.js'; import '../lion-dialog.js';
describe('lion-dialog', () => { describe('lion-dialog', () => {
@ -30,5 +29,30 @@ describe('lion-dialog', () => {
expect(el.opened).to.be.true; 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;
});
}); });
}); });

9
packages/overlays/src/OverlayMixin.js
View file

@ -147,8 +147,8 @@ export const OverlayMixin = dedupeMixin(
if (this._overlayCtrl) { if (this._overlayCtrl) {
this.__tornDown = true; this.__tornDown = true;
this.__overlayContentNodeWrapperBeforeTeardown = this._overlayContentNodeWrapper; this.__overlayContentNodeWrapperBeforeTeardown = this._overlayContentNodeWrapper;
this._teardownOverlayCtrl();
} }
this._teardownOverlayCtrl();
} }
get _overlayInvokerNode() { get _overlayInvokerNode() {
@ -206,11 +206,14 @@ export const OverlayMixin = dedupeMixin(
this.__overlaySetupCompleteResolve(); this.__overlaySetupCompleteResolve();
} }
_teardownOverlayCtrl() { async _teardownOverlayCtrl() {
this._teardownOpenCloseListeners(); if (this._overlayCtrl) {
this.__teardownSyncFromOverlayController(); this.__teardownSyncFromOverlayController();
this._overlayCtrl.teardown(); this._overlayCtrl.teardown();
} }
await this.updateComplete;
this._teardownOpenCloseListeners();
}
async _setOpenedWithoutPropertyEffects(newOpened) { async _setOpenedWithoutPropertyEffects(newOpened) {
this.__blockSyncToOverlayCtrl = true; this.__blockSyncToOverlayCtrl = true;