From a6fafa6a4d2ebebf16a5262b93cb6bb814731d0c Mon Sep 17 00:00:00 2001
From: Rahul Badade <rahulvbadade@gmail.com>
Date: Fri, 19 Dec 2025 22:27:57 +0530
Subject: [PATCH] Fix: Autoselect input text box on pageload and conversation
 reset (#2177) (#2194)

* Fix: Autoselect input text box on pageload and conversation reset

- Added autoFocus to useEffect dependency array in MessageInput
- Added key prop to MessageInput to force remount on conversation reset
- Implemented refocus after message submission
- Removed duplicate input clearing logic in handleKeyDown

Fixes #2177

* fix: optimize input handling

---------

Co-authored-by: Alex <a@tushynski.me>
---
 frontend/src/components/MessageInput.tsx   | 28 ++++++++++++++++------
 frontend/src/conversation/Conversation.tsx |  1 +
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
index 750b0b12..86bb0f6d 100644
--- a/frontend/src/components/MessageInput.tsx
+++ b/frontend/src/components/MessageInput.tsx
@@ -500,7 +500,7 @@ export default function MessageInput({
     return () => clearInterval(interval);
   }, [attachments, dispatch]);
 
-  const handleInput = () => {
+  const handleInput = useCallback(() => {
     if (inputRef.current) {
       if (window.innerWidth < 350) inputRef.current.style.height = 'auto';
       else inputRef.current.style.height = '64px';
@@ -509,12 +509,21 @@ export default function MessageInput({
         96,
       )}px`;
     }
-  };
+  }, []);
+
+  const isMountedRef = useRef(true);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
 
   useEffect(() => {
     if (autoFocus) inputRef.current?.focus();
     handleInput();
-  }, []);
+  }, [autoFocus, handleInput]);
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setValue(e.target.value);
@@ -525,10 +534,7 @@ export default function MessageInput({
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       handleSubmit();
-      if (inputRef.current) {
-        inputRef.current.value = '';
-        handleInput();
-      }
+      handleInput();
     }
   };
 
@@ -565,6 +571,14 @@ export default function MessageInput({
     if (value.trim() && !loading) {
       onSubmit(value);
       setValue('');
+      // Refocus input after submission if autoFocus is enabled
+      if (autoFocus) {
+        setTimeout(() => {
+          if (isMountedRef.current) {
+            inputRef.current?.focus();
+          }
+        }, 0);
+      }
     }
   };
 
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 2ab193ec..62fe7c54 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -179,6 +179,7 @@ export default function Conversation() {
       <div className="bg-opacity-0 z-3 flex h-auto w-full max-w-[1300px] flex-col items-end self-center rounded-2xl py-1 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
         <div className="flex w-full items-center rounded-[40px] px-2">
           <MessageInput
+            key={conversationId || 'new'}
             onSubmit={(text) => {
               handleQuestionSubmission(text);
             }}