feat(frontend) Focus on text area input when the user uploads a proje…

…ct (#4372)
All-Hands-AI · Oct 14, 2024 · 78cf9d5 · 78cf9d5
1 parent 5eae10d
commit 78cf9d5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/frontend/src/routes/_index/route.tsx b/frontend/src/routes/_index/route.tsx
@@ -107,6 +107,7 @@ function Home() {
   const [connectToGitHubModalOpen, setConnectToGitHubModalOpen] =
     React.useState(false);
   const [importedFile, setImportedFile] = React.useState<File | null>(null);
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
   const dispatch = useDispatch();
   const { files } = useSelector((state: RootState) => state.initalQuery);
@@ -131,7 +132,10 @@ function Home() {
       <HeroHeading />
       <div className="flex flex-col gap-16 w-[600px] items-center">
         <div className="flex flex-col gap-2 w-full">
-          <TaskForm importedProjectZip={importedFile} />
+          <TaskForm
+            importedProjectZip={importedFile}
+            textareaRef={textareaRef}
+          />
           {files.length > 0 && (
             <AttachedFilesSlider
               files={files}
@@ -173,6 +177,8 @@ function Home() {
                       if (event.target.files) {
                         const zip = event.target.files[0];
                         setImportedFile(zip);
+                        // focus on the task form
+                        textareaRef.current?.focus();
                       } else {
                         // TODO: handle error
                       }

diff --git a/frontend/src/routes/_index/task-form.tsx b/frontend/src/routes/_index/task-form.tsx
@@ -18,19 +18,15 @@ interface MainTextareaInputProps {
   formRef: React.RefObject<HTMLFormElement>;
 }
 
-function MainTextareaInput({
-  disabled,
-  placeholder,
-  value,
-  onChange,
-  formRef,
-}: MainTextareaInputProps) {
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
-
+const MainTextareaInput = React.forwardRef<
+  HTMLTextAreaElement,
+  MainTextareaInputProps
+>(({ disabled, placeholder, value, onChange, formRef }, ref) => {
   const adjustHeight = () => {
     const MAX_LINES = 15;
 
-    const textarea = textareaRef.current;
+    // ref can either be a callback ref or a MutableRefObject
+    const textarea = typeof ref === "function" ? null : ref?.current;
     if (textarea) {
       textarea.style.height = "auto"; // Reset to auto to recalculate scroll height
       const { scrollHeight } = textarea;
@@ -52,7 +48,7 @@ function MainTextareaInput({
 
   return (
     <textarea
-      ref={textareaRef}
+      ref={ref}
       disabled={disabled}
       name="q"
       rows={1}
@@ -73,7 +69,9 @@ function MainTextareaInput({
       )}
     />
   );
-}
+});
+
+MainTextareaInput.displayName = "MainTextareaInput";
 
 const getRandomKey = (obj: Record<string, string>) => {
   const keys = Object.keys(obj);
@@ -84,9 +82,10 @@ const getRandomKey = (obj: Record<string, string>) => {
 
 interface TaskFormProps {
   importedProjectZip: File | null;
+  textareaRef?: React.RefObject<HTMLTextAreaElement>;
 }
 
-export function TaskForm({ importedProjectZip }: TaskFormProps) {
+export function TaskForm({ importedProjectZip, textareaRef }: TaskFormProps) {
   const dispatch = useDispatch();
   const navigation = useNavigation();
   const fetcher = useFetcher();
@@ -164,6 +163,7 @@ export function TaskForm({ importedProjectZip }: TaskFormProps) {
         />
         <div className="relative w-full">
           <MainTextareaInput
+            ref={textareaRef}
             disabled={navigation.state === "submitting"}
             placeholder={
               selectedRepository