From a827cb7c4ef533215f4d2b2173b0ddbfd54cb670 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Wed, 23 Nov 2022 19:07:43 -0500
Subject: [PATCH] Reset link preview tooltip state when paging through stories

---
 ts/components/TextAttachment.tsx | 41 ++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/ts/components/TextAttachment.tsx b/ts/components/TextAttachment.tsx
index a125f688408f..d2a09c2f19ae 100644
--- a/ts/components/TextAttachment.tsx
+++ b/ts/components/TextAttachment.tsx
@@ -20,6 +20,7 @@ import {
   getHexFromNumber,
   getBackgroundColor,
 } from '../util/getStoryBackground';
+import { SECOND } from '../util/durations';
 
 const renderNewLines: RenderTextCallbackType = ({
   text: textWithNewLines,
@@ -133,6 +134,32 @@ export function TextAttachment({
     node.setSelectionRange(node.value.length, node.value.length);
   }, [isEditingText]);
 
+  useEffect(() => {
+    setLinkPreviewOffsetTop(undefined);
+  }, [textAttachment.preview?.url]);
+
+  const [isHoveringOverTooltip, setIsHoveringOverTooltip] = useState(false);
+
+  function showTooltip() {
+    if (disableLinkPreviewPopup) {
+      return;
+    }
+    setIsHoveringOverTooltip(true);
+    setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
+  }
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (!isHoveringOverTooltip) {
+        setLinkPreviewOffsetTop(undefined);
+      }
+    }, 5 * SECOND);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [isHoveringOverTooltip]);
+
   const storyBackgroundColor = {
     background: getBackgroundColor(textAttachment),
   };
@@ -249,16 +276,10 @@ export function TextAttachment({
                     ),
                   })}
                   ref={linkPreview}
-                  onFocus={() => {
-                    if (!disableLinkPreviewPopup) {
-                      setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
-                    }
-                  }}
-                  onMouseOver={() => {
-                    if (!disableLinkPreviewPopup) {
-                      setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
-                    }
-                  }}
+                  onBlur={() => setIsHoveringOverTooltip(false)}
+                  onFocus={showTooltip}
+                  onMouseOut={() => setIsHoveringOverTooltip(false)}
+                  onMouseOver={showTooltip}
                 >
                   {onRemoveLinkPreview && (
                     <div className="TextAttachment__preview__remove">