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

fix(overlays): no hide on label click

Browse source
This commit is contained in:
Thijs Louisse 2020-07-10 17:56:30 +02:00
parent c3f7aa8ea2
commit e46f51ce33
2 changed files with 38 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -808,17 +808,28 @@ export class OverlayController {
if (phase === 'show') {
let wasClickInside = false;
// handle on capture phase and remember till the next task that there was an inside click
let wasIndirectSynchronousClick = false;
// Handle on capture phase and remember till the next task that there was an inside click
this.__preventCloseOutsideClick = () => {
if (wasClickInside) {
// This occurs when a synchronous new click is triggered from a previous click.
// For instance, when we have a label pointing to an input, the platform triggers
// a new click on the input. Not taking this click into account, will hide the overlay
// in `__onCaptureHtmlClick`
wasIndirectSynchronousClick = true;
}
wasClickInside = true;
setTimeout(() => {
wasClickInside = false;
setTimeout(() => {
wasIndirectSynchronousClick = false;
});
});
};
// handle on capture phase and schedule the hide if needed
this.__onCaptureHtmlClick = () => {
setTimeout(() => {
if (wasClickInside === false) {
if (wasClickInside === false && !wasIndirectSynchronousClick) {
this.hide();
}
});

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

@ -68,10 +68,11 @@ describe('OverlayController', () => {
}
if (mode === 'inline') {
contentNode = await fixture(html`
<div style="z-index: xxxxxxxxxxxx ;">
<div>
I should be on top
</div>
`);
contentNode.style.zIndex = zIndexVal;
}
return contentNode;
}
@ -430,6 +431,7 @@ describe('OverlayController', () => {
// Don't hide on inside (content) click
ctrl.contentNode.click();
await aTimeout();
expect(ctrl.isShown).to.be.true;
// Important to check if it can be still shown after, because we do some hacks inside
@ -566,6 +568,28 @@ describe('OverlayController', () => {
await ctrl.show();
expect(ctrl.isShown).to.equal(true);
});
it('doesn\'t hide on "inside label" click', async () => {
const contentNode = await fixture(`
<div>
<label for="test">test</label>
<input id="test">
Content
</div>`);
const labelNode = contentNode.querySelector('label[for=test]');
const ctrl = new OverlayController({
...withGlobalTestConfig(),
hidesOnOutsideClick: true,
contentNode,
});
await ctrl.show();
// Don't hide on label click
labelNode.click();
await aTimeout();
expect(ctrl.isShown).to.be.true;
});
});
describe('elementToFocusAfterHide', () => {