diff --git a/.changeset/fifty-nails-cry.md b/.changeset/fifty-nails-cry.md new file mode 100644 index 000000000..146cd60aa --- /dev/null +++ b/.changeset/fifty-nails-cry.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +[tooltip] hide tooltip if the invoker gets disabled diff --git a/packages/ui/components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js b/packages/ui/components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js index c2755495e..286f8d100 100644 --- a/packages/ui/components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js +++ b/packages/ui/components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js @@ -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); diff --git a/packages/ui/components/tooltip/test/lion-tooltip.test.js b/packages/ui/components/tooltip/test/lion-tooltip.test.js index a7e4e3d3c..309f1734e 100644 --- a/packages/ui/components/tooltip/test/lion-tooltip.test.js +++ b/packages/ui/components/tooltip/test/lion-tooltip.test.js @@ -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` + +
Hey there
+ +
+ `) + ); + 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`