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

fix(overlays): synchronize intercepted opened state OverlayMixin

Browse source 
Co-authored-by: Aymen Ben Amor <Aymen.Ben.Amor@ing.com>
This commit is contained in:
Thijs Louisse 2020-04-06 17:24:29 +02:00
parent b58aa65377
commit 88d3850d5d
3 changed files with 26 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -86,10 +86,12 @@ export const OverlayMixin = dedupeMixin(
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('opened')) {
if (this._overlayCtrl) {
this.__syncToOverlayController();
}
if (
changedProperties.has('opened') &&
this._overlayCtrl &&
!this.__blockSyncToOverlayCtrl
) {
this.__syncToOverlayController();
}
}
@ -210,6 +212,13 @@ export const OverlayMixin = dedupeMixin(
this._overlayCtrl.teardown();
}
async _setOpenedWithoutPropertyEffects(newOpened) {
this.__blockSyncToOverlayCtrl = true;
this.opened = newOpened;
await this.updateComplete;
this.__blockSyncToOverlayCtrl = false;
}
__setupSyncFromOverlayController() {
this.__onOverlayCtrlShow = () => {
this.opened = true;
@ -223,6 +232,8 @@ export const OverlayMixin = dedupeMixin(
const event = new CustomEvent('before-opened', { cancelable: true });
this.dispatchEvent(event);
if (event.defaultPrevented) {
// Check whether our current `.opened` state is not out of sync with overlayCtrl
this._setOpenedWithoutPropertyEffects(this._overlayCtrl.isShown);
beforeShowEvent.preventDefault();
}
};
@ -231,6 +242,8 @@ export const OverlayMixin = dedupeMixin(
const event = new CustomEvent('before-closed', { cancelable: true });
this.dispatchEvent(event);
if (event.defaultPrevented) {
// Check whether our current `.opened` state is not out of sync with overlayCtrl
this._setOpenedWithoutPropertyEffects(this._overlayCtrl.isShown);
beforeHideEvent.preventDefault();
}
};

1
packages/overlays/stories/demo-overlay-system.js
View file

@ -32,6 +32,7 @@ class DemoOverlaySystem extends OverlayMixin(LitElement) {
<slot name="invoker"></slot>
<slot name="content"></slot>
<slot name="_overlay-shadow-outlet"></slot>
<div>popup is ${this.opened ? 'opened' : 'closed'}</div>
`;
}
}

9
packages/overlays/test-suites/OverlayMixin.suite.js
View file

@ -113,7 +113,14 @@ export function runOverlayMixinSuite({ /* tagString, */ tag, suffix = '' }) {
<button slot="invoker">invoker button</button>
</${tag}>
`);
await el._overlayCtrl.show();
el.querySelector('[slot="invoker"]').click();
await nextFrame();
expect(el.opened).to.be.false;
// Also, the opened state should be synced back to that of the OverlayController
el.opened = true;
expect(el.opened).to.be.true;
await nextFrame();
expect(el.opened).to.be.false;
});