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

feat(overlay): add hide on outside esc handler

Browse source
This commit is contained in:
Marcos Gil 2020-02-05 16:30:27 +01:00 committed by Thomas Allmer
parent 13a43fa402
commit c0ed437e8f
4 changed files with 37 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/overlays/src/OverlayController.js
View file

@ -32,6 +32,7 @@ export class OverlayController {
preventsScroll: false,
trapsKeyboardFocus: false,
hidesOnEsc: false,
hidesOnOutsideEsc: false,
hidesOnOutsideClick: false,
isTooltip: false,
handlesUserInteraction: false,
@ -376,6 +377,9 @@ export class OverlayController {
if (this.hidesOnEsc) {
this._handleHidesOnEsc({ phase });
}
if (this.hidesOnOutsideEsc) {
this._handleHidesOnOutsideEsc({ phase });
}
if (this.hidesOnOutsideClick) {
this._handleHidesOnOutsideClick({ phase });
}
@ -537,6 +541,15 @@ export class OverlayController {
}
}
_handleHidesOnOutsideEsc({ phase }) {
if (phase === 'show') {
this.__escKeyHandler = ev => ev.key === 'Escape' && this.hide();
document.addEventListener('keyup', this.__escKeyHandler);
} else if (phase === 'hide') {
document.removeEventListener('keyup', this.__escKeyHandler);
}
}
_handleInheritsReferenceWidth() {
if (!this._referenceNode) {
return;

23
packages/overlays/test/OverlayController.test.js
View file

@ -314,6 +314,29 @@ describe('OverlayController', () => {
});
});
describe('hidesOnOutsideEsc', () => {
it('hides when [escape] is pressed on outside element', async () => {
const ctrl = new OverlayController({
...withGlobalTestConfig(),
hidesOnOutsideEsc: true,
});
await ctrl.show();
document.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));
await aTimeout();
expect(ctrl.isShown).to.be.false;
});
it('stays shown when [escape] is pressed on inside element', async () => {
const ctrl = new OverlayController({
...withGlobalTestConfig(),
hidesOnOutsideEsc: true,
});
await ctrl.show();
ctrl.contentNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));
expect(ctrl.isShown).to.be.true;
});
});
describe('hidesOnOutsideClick', () => {
it('hides on outside click', async () => {
const contentNode = await fixture('<div>Content</div>');

1
packages/tooltip/src/LionTooltip.js
View file

@ -44,6 +44,7 @@ export class LionTooltip extends OverlayMixin(LitElement) {
placementMode: 'local',
elementToFocusAfterHide: null,
hidesOnEsc: true,
hidesOnOutsideEsc: true,
popperConfig: {
placement: 'top', // default
modifiers: {

35
packages/tooltip/test/lion-tooltip.test.js
View file

@ -85,41 +85,6 @@ describe('lion-tooltip', () => {
expect(el._overlayCtrl.isShown).to.equal(true);
});
it('should show content on focusin and hide on Escape key press', async () => {
const el = await fixture(html`
<lion-tooltip>
<div slot="content">Hey there</div>
<button slot="invoker">Tooltip button</button>
</lion-tooltip>
`);
const invoker = Array.from(el.children).find(child => child.slot === 'invoker');
const eventFocusIn = new Event('focusin');
invoker.dispatchEvent(eventFocusIn);
await el.updateComplete;
expect(el._overlayCtrl.isShown).to.equal(true);
const eventEscapeKeypress = new KeyboardEvent('keyup', { key: 'Escape' });
invoker.dispatchEvent(eventEscapeKeypress);
await el.updateComplete;
expect(el._overlayCtrl.isShown).to.equal(false);
});
it('should show content on mouseenter and hide on Escape key press', async () => {
const el = await fixture(html`
<lion-tooltip>
<div slot="content">Hey there</div>
<button slot="invoker">Tooltip button</button>
</lion-tooltip>
`);
const eventMouseEnter = new Event('mouseenter');
el.dispatchEvent(eventMouseEnter);
await el.updateComplete;
expect(el._overlayCtrl.isShown).to.equal(true);
const eventEscapeKeypress = new KeyboardEvent('keyup', { key: 'Escape' });
document.dispatchEvent(eventEscapeKeypress);
await el.updateComplete;
expect(el._overlayCtrl.isShown).to.equal(false);
});
it('should tooltip contains html when specified in tooltip content body', async () => {
const el = await fixture(html`
<lion-tooltip>