reply now triggers scroll

hicommonwealth · Sep 13, 2024 · e3c682f · e3c682f
1 parent 41466fb
commit e3c682f
Showing 1 changed file with 21 additions and 6 deletions.
diff --git a/packages/commonwealth/client/scripts/views/pages/discussions/CommentTree/CommentTree.tsx b/packages/commonwealth/client/scripts/views/pages/discussions/CommentTree/CommentTree.tsx
@@ -155,6 +155,7 @@ export const CommentTree = ({
   });
 
   const scrollToRef = useRef(null);
+  const scrollToEditorRef = useRef(null);
 
   const scrollToElement = () => {
     if (scrollToRef.current) {
@@ -166,6 +167,17 @@ export const CommentTree = ({
     }
   };
 
+  const scrollToEditor = () => {
+    // @ts-expect-error <StrictNullChecks/>
+    scrollToEditorRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    if (isReplying) {
+      scrollToEditor();
+    }
+  }, [isReplying]);
+
   // eslint-disable-next-line @typescript-eslint/no-shadow
   const handleIsReplying = (isReplying: boolean, id?: number) => {
     if (isReplying) {
@@ -525,12 +537,15 @@ export const CommentTree = ({
             </div>
             <div ref={scrollToRef}></div>
             {isReplying && parentCommentId === comment.id && (
-              <CreateComment
-                handleIsReplying={handleIsReplying}
-                parentCommentId={parentCommentId}
-                rootThread={thread}
-                canComment={canComment}
-              />
+              <>
+                <CreateComment
+                  handleIsReplying={handleIsReplying}
+                  parentCommentId={parentCommentId}
+                  rootThread={thread}
+                  canComment={canComment}
+                />
+                <div ref={scrollToEditorRef}></div>
+              </>
             )}
           </React.Fragment>
         );