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

ing-bank · Dec 6, 2023 · d997e52 · d997e52
1 parent 40a4e13
commit d997e52
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/.changeset/fifty-nails-cry.md b/.changeset/fifty-nails-cry.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[tooltip] hide tooltip if the invoker gets disabled
diff --git a/...omponents/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js b/...omponents/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
@@ -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`