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

fix(tooltip): hide tooltip if the invoker gets disabled (#2154)

Browse source
This commit is contained in:
gerjanvangeest 2023-12-06 13:37:23 +01:00 committed by GitHub
parent 40a4e13736
commit d997e5233e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/fifty-nails-cry.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[tooltip] hide tooltip if the invoker gets disabled

6
packages/ui/components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js
View file

@ -32,15 +32,13 @@ export function withHoverInteraction({ delayIn = 0, delayOut = 300 }) {
*/
function handleOpenClosed(event) {
const { type } = event;
if (controller._hasDisabledInvoker()) {
return;
}
clearTimeout(delayTimeout);
isFocused = type === 'focusout' ? false : isFocused || type === 'focusin';
isHovered = type === 'mouseleave' ? false : isHovered || type === 'mouseenter';
const shouldOpen = isFocused || isHovered;
if (shouldOpen) {
if (shouldOpen && !controller._hasDisabledInvoker()) {
delayTimeout = setTimeout(() => {
controller.show();
}, delayIn);

30
packages/ui/components/tooltip/test/lion-tooltip.test.js
View file

@ -182,6 +182,36 @@ describe('lion-tooltip', () => {
expect(el._overlayCtrl.isShown).to.equal(false);
});
it('gets hidden when invoker gets disabled', async () => {
const el = /** @type {LionTooltip} */ (
await fixture(html`
<lion-tooltip>
<div slot="content">Hey there</div>
<button slot="invoker">Tooltip button</button>
</lion-tooltip>
`)
);
const invoker = /** @type {HTMLButtonElement} */ (
Array.from(el.children).find(child => child.slot === 'invoker')
);
const eventFocusIn = new Event('focusin');
invoker.dispatchEvent(eventFocusIn);
clock.tick(300);
await el.updateComplete;
// @ts-expect-error [allow-protected-in-tests]
expect(el._overlayCtrl.isShown).to.equal(true);
invoker.setAttribute('disabled', '');
const eventFocusOut = new Event('focusout');
invoker.dispatchEvent(eventFocusOut);
clock.tick(300);
await el.updateComplete;
await el.updateComplete; // webkit needs longer
// @ts-expect-error [allow-protected-in-tests]
expect(el._overlayCtrl.isShown).to.equal(false);
});
it('contains html when specified in tooltip content body', async () => {
const el = /** @type {LionTooltip} */ (
await fixture(html`