feat: add focus functionality to CommentCreate input when replying

parlandin · parlandin · commit f9d464a7102a · 2025-03-03T17:33:36.000-03:00
diff --git a/src/components/CommentCreate/index.tsx b/src/components/CommentCreate/index.tsx
@@ -1,4 +1,10 @@
-import React, { useState, useMemo, useCallback, useEffect } from "react";
+import React, {
+  useState,
+  useMemo,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
 import * as S from "./styles";
 import ViewMarkdown from "@components/ViewMarkdown";
 
@@ -18,6 +24,8 @@ const CommentCreate: React.FC<ICommentCreate> = ({
   const [comment, setComment] = useState("");
   const [preview, setPreview] = useState<boolean>(false);
 
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
   const account = useMemo(
     () => ({
       isLogged: true,
@@ -29,10 +37,6 @@ const CommentCreate: React.FC<ICommentCreate> = ({
     []
   );
 
-  const clearComment = useCallback(() => {
-    setComment("");
-  }, []);
-
   const withMention = useCallback(
     (content: string) => {
       if (!isReplyOverReply) {
@@ -78,6 +82,12 @@ const CommentCreate: React.FC<ICommentCreate> = ({
     [account]
   );
 
+  useEffect(() => {
+    if (isReplying) {
+      inputRef.current?.focus();
+    }
+  }, [isReplying]);
+
   return (
     <S.Container>
       <S.CommentSection>
@@ -94,6 +104,7 @@ const CommentCreate: React.FC<ICommentCreate> = ({
             placeholder="Deixe seu comentário..."
             value={comment}
             onChange={handleChange}
+            ref={inputRef}
           />
         )}
 
