From 9901f58df349709a3ccd08635ffd707c30f3912c Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Mon, 8 Jan 2024 11:30:39 +0800
Subject: [PATCH] fix(console): remove hover state from tip button after tip is
 closed (#5197)

---
 .../src/ds-components/CopyToClipboard/index.tsx |  4 ++++
 .../src/ds-components/Tip/ToggleTip/index.tsx   | 17 +++++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/console/src/ds-components/CopyToClipboard/index.tsx b/packages/console/src/ds-components/CopyToClipboard/index.tsx
index 7cf1f69d8..20ccc7f53 100644
--- a/packages/console/src/ds-components/CopyToClipboard/index.tsx
+++ b/packages/console/src/ds-components/CopyToClipboard/index.tsx
@@ -70,6 +70,10 @@ function CopyToClipboard(
   }, []);
 
   const copy: MouseEventHandler<HTMLButtonElement> = async () => {
+    /**
+     * Note: should blur the copy icon button before the tooltip is shown, or it will remain focused after the tooltip is closed.
+     */
+    copyIconReference.current?.blur();
     setCopyState('copying');
     await navigator.clipboard.writeText(value);
     setCopyState('copied');
diff --git a/packages/console/src/ds-components/Tip/ToggleTip/index.tsx b/packages/console/src/ds-components/Tip/ToggleTip/index.tsx
index 21a94ca39..5899a8898 100644
--- a/packages/console/src/ds-components/Tip/ToggleTip/index.tsx
+++ b/packages/console/src/ds-components/Tip/ToggleTip/index.tsx
@@ -41,6 +41,15 @@ function ToggleTip({
 
   const [isOpen, setIsOpen] = useState(false);
 
+  const openTip = useCallback(() => {
+    setIsOpen(true);
+    /**
+     * Note: should focus on the anchor wrapper element after the tip bubble is opened,
+     * or the hover state will not be removed from its child element, and this will cause the child element to have a hover state after the tip bubble is closed.
+     */
+    anchorRef.current?.focus();
+  }, []);
+
   const onClose = useCallback(() => {
     setIsOpen(false);
   }, [setIsOpen]);
@@ -67,12 +76,8 @@ function ToggleTip({
         role="tab"
         tabIndex={0}
         className={anchorClassName}
-        onClick={() => {
-          setIsOpen(true);
-        }}
-        onKeyDown={onKeyDownHandler(() => {
-          setIsOpen(true);
-        })}
+        onClick={openTip}
+        onKeyDown={onKeyDownHandler(openTip)}
       >
         {children}
       </div>