fix(tooltip): fix tooltip reopen when mouse leaves (#1279)

Author: Theeraphat-Sorasetsakul

packages/elements/src/tooltip/__test__/tooltip.test.js

@@ -265,6 +265,7 @@ describe('tooltip/Tooltip', function () {
     });
 
     await elementUpdated(el);
+    await nextFrame();
 
     expect(tooltip.opened, 'Tooltip is not opened').to.be.true;
 
@@ -275,6 +276,7 @@ describe('tooltip/Tooltip', function () {
     });
 
     await elementUpdated(el);
+    await nextFrame();
 
     expect(tooltip.opened, 'Tooltip is not hidden').to.be.false;
   }).timeout(MouseMoveDelay * 2);

packages/elements/src/tooltip/index.ts

@@ -390,20 +390,12 @@ class Tooltip extends BasicElement {
    * Hide tooltip
    * @returns {void}
    */
-  private hideTooltip(): void {
+  private resetTooltip = (): void => {
     this.reset();
     this.matchTarget = null;
     this.matchTargetRect = null;
     this.positionTarget = null;
     this.setOpened(false);
-  }
-
-  /**
-   * Reset tooltip
-   * @returns {void}
-   */
-  private resetTooltip = (): void => {
-    this.hideTooltip();
   };
 
   /**
@@ -507,7 +499,7 @@ class Tooltip extends BasicElement {
    */
   private onClick = (): void => {
     this.clicked = true;
-    this.hideTooltip();
+    this.resetTooltip();
   };
 
   /**

packages/elements/src/tooltip/managers/tooltip-manager.ts

@@ -40,6 +40,17 @@ class TooltipManager {
     }
   }
 
+  /**
+   * Cancel the pending task of throttled mousemove event listener.
+   * This prevents the task from running out of order compared to the event dispatching sequence
+   * due to its setTimeout usage.
+   * Any event listener hiding the tooltip should call this method.
+   * @returns {void}
+   */
+  private cancelThrottler() {
+    this.titleThrottler.task?.cancel();
+  }
+
   /**
    * @param event Mouse move event
    * @returns {void}
@@ -59,6 +70,7 @@ class TooltipManager {
    * @returns {void}
    */
   private onClick = (event: MouseEvent): void => {
+    this.cancelThrottler();
     this.registry.forEach(({ click }) => click(event));
   };
 
@@ -67,6 +79,7 @@ class TooltipManager {
    * @returns {void}
    */
   private onMouseOut = (event: MouseEvent): void => {
+    this.cancelThrottler();
     this.registry.forEach(({ mouseout }) => mouseout(event));
   };
 
@@ -75,6 +88,7 @@ class TooltipManager {
    * @returns {void}
    */
   private onMouseLeave = (event: MouseEvent): void => {
+    this.cancelThrottler();
     this.registry.forEach(({ mouseleave }) => mouseleave(event));
   };
 
@@ -83,6 +97,7 @@ class TooltipManager {
    * @returns {void}
    */
   private onWheel = (event: WheelEvent): void => {
+    this.cancelThrottler();
     this.registry.forEach(({ wheel }) => wheel(event));
   };
 
@@ -91,6 +106,7 @@ class TooltipManager {
    * @returns {void}
    */
   private onKeyDown = (event: KeyboardEvent): void => {
+    this.cancelThrottler();
     this.registry.forEach(({ keydown }) => keydown(event));
   };
 
@@ -99,6 +115,7 @@ class TooltipManager {
    * @returns {void}
    */
   private onBlur = (event: FocusEvent): void => {
+    this.cancelThrottler();
     this.registry.forEach(({ blur }) => blur(event));
   };