fix: tooltip can't disappear when mouseleave on Paragraph (ant-design…

…#38509)
wongest · Dec 12, 2022 · 44a15e6 · 44a15e6
1 parent dd50c59
commit 44a15e6
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 8 deletions.
diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx
@@ -191,15 +191,19 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
   // ========================== Copyable ==========================
   const [enableCopy, copyConfig] = useMergedConfig<CopyConfig>(copyable);
   const [copied, setCopied] = React.useState(false);
-  const copyIdRef = React.useRef<number>();
+  const [copyTooltipVisible, setCopyTootipVisible] = React.useState(false);
+  const copyIdsRef = React.useRef<number[]>([]);
+
+  const copyVisibleTime = 3000;
 
   const copyOptions: Pick<CopyConfig, 'format'> = {};
   if (copyConfig.format) {
     copyOptions.format = copyConfig.format;
   }
 
-  const cleanCopyId = () => {
-    window.clearTimeout(copyIdRef.current!);
+  const cleanCopyIds = () => {
+    copyIdsRef.current.forEach((id) => window.clearTimeout(id));
+    copyIdsRef.current = [];
   };
 
   const onCopyClick = (e?: React.MouseEvent<HTMLDivElement>) => {
@@ -211,15 +215,27 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
     setCopied(true);
 
     // Trigger tips update
-    cleanCopyId();
-    copyIdRef.current = window.setTimeout(() => {
+    cleanCopyIds();
+    const copyTimeoutId = window.setTimeout(() => {
       setCopied(false);
-    }, 3000);
+    }, copyVisibleTime);
+    const copyVisibleTimeoutId = window.setTimeout(() => {
+      setCopyTootipVisible(false);
+    }, copyVisibleTime - 50);
+    copyIdsRef.current.push(copyTimeoutId, copyVisibleTimeoutId);
 
     copyConfig.onCopy?.(e);
   };
 
-  React.useEffect(() => cleanCopyId, []);
+  const onCopyMouseOver = () => {
+    setCopyTootipVisible(true);
+  };
+
+  const onCopyMouseLeft = () => {
+    setCopyTootipVisible(false);
+  };
+
+  React.useEffect(() => cleanCopyIds, []);
 
   // ========================== Ellipsis ==========================
   const [isLineClampSupport, setIsLineClampSupport] = React.useState(false);
@@ -459,12 +475,16 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
     const systemStr = copied ? textLocale.copied : textLocale.copy;
     const ariaLabel = typeof copyTitle === 'string' ? copyTitle : systemStr;
 
+    const tooltipVisible = copyTooltipVisible && !!copyTitle;
+
     return (
-      <Tooltip key="copy" title={copyTitle}>
+      <Tooltip key="copy" title={copyTitle} visible={tooltipVisible}>
         <TransButton
           className={classNames(`${prefixCls}-copy`, copied && `${prefixCls}-copy-success`)}
           onClick={onCopyClick}
           aria-label={ariaLabel}
+          onMouseOver={onCopyMouseOver}
+          onMouseLeave={onCopyMouseLeft}
         >
           {copied
             ? getNode(iconNodes[1], <CheckOutlined />, true)

diff --git a/components/typography/__tests__/copy.test.tsx b/components/typography/__tests__/copy.test.tsx
@@ -265,5 +265,21 @@ describe('Typography copy', () => {
       expect(spy.mock.calls[0][0]).toEqual(nextText);
       jest.useRealTimers();
     });
+
+    it('tooltip should hide when mouse leave', () => {
+      const { container } = render(
+        <Base component="p" copyable>
+          test copy
+        </Base>,
+      );
+
+      expect(container.getElementsByTagName('span')).toHaveLength(1);
+      const button = container.getElementsByTagName('span')[0];
+
+      fireEvent.mouseOver(button);
+      expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
+      fireEvent.mouseLeave(button);
+      expect(container.querySelector('.ant-tooltip-open')).toBeNull();
+    });
   });
 });