From d08f13a28c3635e87114b90606246fda7a539e2a Mon Sep 17 00:00:00 2001
From: phuctm97 <phuctm97@gmail.com>
Date: Sun, 14 Jul 2024 10:03:51 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20hide=20tooltip=20on=20cli?=
 =?UTF-8?q?cking=20action=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ActionIcon/index.tsx | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/ActionIcon/index.tsx b/src/ActionIcon/index.tsx
index 828ba154..060c6680 100644
--- a/src/ActionIcon/index.tsx
+++ b/src/ActionIcon/index.tsx
@@ -1,7 +1,14 @@
 'use client';
 
 import { Loader2 } from 'lucide-react';
-import { type CSSProperties, forwardRef, useMemo } from 'react';
+import {
+  type CSSProperties,
+  MouseEventHandler,
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
 import { Flexbox, type FlexboxProps } from 'react-layout-kit';
 
 import Icon, {
@@ -123,13 +130,24 @@ const ActionIcon = forwardRef<HTMLDivElement, ActionIconProps>(
 
     const spin = <Icon icon={Loader2} {...iconProps} spin />;
 
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+
+    const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(
+      (event) => {
+        if (loading || disable) return;
+        setTooltipOpen(false);
+        onClick?.(event);
+      },
+      [loading, disable, setTooltipOpen, onClick],
+    );
+
     const actionIconBlock = (
       <Flexbox
         align={'center'}
         className={cx(styles.block, disable ? styles.disabled : styles.normal, className)}
         horizontal
         justify={'center'}
-        onClick={loading || disable ? undefined : onClick}
+        onClick={handleClick}
         ref={ref}
         style={{ borderRadius, height: blockSize, width: blockSize, ...style }}
         {...rest}
@@ -146,6 +164,8 @@ const ActionIcon = forwardRef<HTMLDivElement, ActionIconProps>(
       <Tooltip
         arrow={arrow}
         mouseEnterDelay={tooltipDelay}
+        onOpenChange={setTooltipOpen}
+        open={tooltipOpen}
         overlayStyle={{ pointerEvents: 'none', ...overlayStyle }}
         placement={placement}
         title={title}