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

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

@ -86,12 +86,14 @@ export const OverlayMixin = dedupeMixin(
updated(changedProperties) { updated(changedProperties) {
super.updated(changedProperties); super.updated(changedProperties);
if (changedProperties.has('opened')) { if (
if (this._overlayCtrl) { changedProperties.has('opened') &&
this._overlayCtrl &&
!this.__blockSyncToOverlayCtrl
) {
this.__syncToOverlayController(); this.__syncToOverlayController();
} }
} }
}
/** /**
* @overridable * @overridable
@ -210,6 +212,13 @@ export const OverlayMixin = dedupeMixin(
this._overlayCtrl.teardown(); this._overlayCtrl.teardown();
} }
async _setOpenedWithoutPropertyEffects(newOpened) {
this.__blockSyncToOverlayCtrl = true;
this.opened = newOpened;
await this.updateComplete;
this.__blockSyncToOverlayCtrl = false;
}
__setupSyncFromOverlayController() { __setupSyncFromOverlayController() {
this.__onOverlayCtrlShow = () => { this.__onOverlayCtrlShow = () => {
this.opened = true; this.opened = true;
@ -223,6 +232,8 @@ export const OverlayMixin = dedupeMixin(
const event = new CustomEvent('before-opened', { cancelable: true }); const event = new CustomEvent('before-opened', { cancelable: true });
this.dispatchEvent(event); this.dispatchEvent(event);
if (event.defaultPrevented) { if (event.defaultPrevented) {
// Check whether our current `.opened` state is not out of sync with overlayCtrl
this._setOpenedWithoutPropertyEffects(this._overlayCtrl.isShown);
beforeShowEvent.preventDefault(); beforeShowEvent.preventDefault();
} }
}; };
@ -231,6 +242,8 @@ export const OverlayMixin = dedupeMixin(
const event = new CustomEvent('before-closed', { cancelable: true }); const event = new CustomEvent('before-closed', { cancelable: true });
this.dispatchEvent(event); this.dispatchEvent(event);
if (event.defaultPrevented) { if (event.defaultPrevented) {
// Check whether our current `.opened` state is not out of sync with overlayCtrl
this._setOpenedWithoutPropertyEffects(this._overlayCtrl.isShown);
beforeHideEvent.preventDefault(); 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="invoker"></slot>
<slot name="content"></slot> <slot name="content"></slot>
<slot name="_overlay-shadow-outlet"></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> <button slot="invoker">invoker button</button>
</${tag}> </${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; expect(el.opened).to.be.false;
}); });