Merge pull request #3250 from tloncorp/po/land-1409-clicking-links-in…

…-refs-should-not-cause-navigate-to-ref refs: fix issue with clicking links in refs
tloncorp · Feb 15, 2024 · 9947fb2 · 9947fb2
2 parents 19978f8 + 5a700c6
commit 9947fb2
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 11 deletions.
diff --git a/ui/src/chat/ChatContent/ChatContent.tsx b/ui/src/chat/ChatContent/ChatContent.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { findLastIndex } from 'lodash';
 import cn from 'classnames';
 import { Link } from 'react-router-dom';
@@ -34,6 +34,8 @@ interface ChatContentProps {
   isScrolling?: boolean;
   className?: string;
   writId?: string;
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+  isInReference?: boolean;
 }
 
 interface InlineContentProps {
@@ -207,6 +209,8 @@ function ChatContent({
   isScrolling = false,
   className = '',
   writId = 'not-writ',
+  onClick,
+  isInReference,
 }: ChatContentProps) {
   const storyInlines = (
     story.filter((s) => 'inline' in s) as VerseInline[]
@@ -227,8 +231,38 @@ function ChatContent({
     return 0;
   });
 
+  useEffect(() => {
+    // If we have an onClick handler (as we would in the case of this component
+    // being use in a reference), we need to add a click listener to the chat
+    // content. This is to prevent the click handler from firing when clicking
+    // on a link within the chat content.
+    // This will *NOT* work if you just pass the onClick handler directly to the
+    // chat content. You need to wrap it in a function that checks the target
+    // element.
+
+    if (onClick) {
+      const handleClick = (e: MouseEvent) => {
+        const target = e.target as HTMLElement | null;
+
+        if (target && target.id === `${writId}-chat-content`) {
+          onClick(e as unknown as React.MouseEvent<HTMLAnchorElement>);
+        }
+      };
+      document.addEventListener('click', handleClick);
+      return () => {
+        document.removeEventListener('click', handleClick);
+      };
+    }
+
+    return () => ({});
+  }, [onClick, writId]);
+
   return (
-    <div className={cn('leading-6', className)}>
+    <div
+      data-in-reference={isInReference}
+      id={`${writId}-chat-content`}
+      className={cn('leading-6', className)}
+    >
       {blockLength > 0 ? (
         <>
           {blockContent

diff --git a/ui/src/components/References/WritBaseReference.tsx b/ui/src/components/References/WritBaseReference.tsx
@@ -160,15 +160,13 @@ function WritBaseReference({
 
   if (contextApp === 'heap-comment') {
     return (
-      <div
-        onClick={handleOpenReferenceClick}
-        className="cursor-pointer rounded-lg border-2 border-gray-50 text-base"
-      >
+      <div className="cursor-pointer rounded-lg border-2 border-gray-50 text-base">
         <ReferenceInHeap type="text" contextApp={contextApp}>
           <ChatContent
             className="line-clamp-1 p-2"
             story={content}
             isScrolling={false}
+            onClick={handleOpenReferenceClick}
           />
           {children}
           <ReferenceBar
@@ -192,11 +190,15 @@ function WritBaseReference({
         'mb-2': isReply,
       })}
     >
-      <div
-        onClick={handleOpenReferenceClick}
-        className={'cursor-pointer p-2 group-hover:bg-gray-50'}
-      >
-        <ChatContent className="p-2" story={content} isScrolling={false} />
+      <div className={'cursor-pointer p-2 group-hover:bg-gray-50'}>
+        <ChatContent
+          className="p-2"
+          story={content}
+          isScrolling={false}
+          onClick={handleOpenReferenceClick}
+          writId={noteId}
+          isInReference
+        />
       </div>
       <ReferenceBar
         nest={nest}