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

Author: Theeraphat-Sorasetsakul

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

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

packages/elements/src/tooltip/index.ts

@@ -382,20 +382,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();
   };
 
   /**
@@ -499,7 +491,7 @@ class Tooltip extends BasicElement {
    */
   private onClick = (): void => {
     this.clicked = true;
-    this.hideTooltip();
+    this.resetTooltip();
   };
 
   /**

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

@@ -39,6 +39,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}
@@ -58,6 +69,7 @@ class TooltipManager {
    * @returns {void}
    */
   private onClick = (event: MouseEvent): void => {
+    this.cancelThrottler();
     this.registry.forEach(({ click }) => click(event));
   };
 
@@ -66,6 +78,7 @@ class TooltipManager {
    * @returns {void}
    */
   private onMouseOut = (event: MouseEvent): void => {
+    this.cancelThrottler();
     this.registry.forEach(({ mouseout }) => mouseout(event));
   };
 
@@ -74,6 +87,7 @@ class TooltipManager {
    * @returns {void}
    */
   private onMouseLeave = (event: MouseEvent): void => {
+    this.cancelThrottler();
     this.registry.forEach(({ mouseleave }) => mouseleave(event));
   };
 
@@ -82,6 +96,7 @@ class TooltipManager {
    * @returns {void}
    */
   private onWheel = (event: WheelEvent): void => {
+    this.cancelThrottler();
     this.registry.forEach(({ wheel }) => wheel(event));
   };
 
@@ -90,6 +105,7 @@ class TooltipManager {
    * @returns {void}
    */
   private onKeyDown = (event: KeyboardEvent): void => {
+    this.cancelThrottler();
     this.registry.forEach(({ keydown }) => keydown(event));
   };
 
@@ -98,6 +114,7 @@ class TooltipManager {
    * @returns {void}
    */
   private onBlur = (event: FocusEvent): void => {
+    this.cancelThrottler();
     this.registry.forEach(({ blur }) => blur(event));
   };