fix(ts)

apps/dashboard/src/components/report/edit-report-name.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { PencilIcon } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 type Props = {
   name?: string;
@@ -10,6 +10,7 @@ type Props = {
 const EditReportName = ({ name }: Props) => {
   const [isEditing, setIsEditing] = useState(false);
   const [newName, setNewName] = useState(name);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const onSubmit = () => {
     if (newName === name) {
@@ -29,11 +30,19 @@ const EditReportName = ({ name }: Props) => {
     setIsEditing(false);
   };
 
+  useEffect(() => {
+    if (isEditing) {
+      inputRef.current?.focus();
+    }
+  }, [isEditing]);
+
   if (isEditing) {
     return (
       <div className="flex">
         <input
+          ref={inputRef}
           type="text"
+          className="w-full rounded-md border border-input p-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
           value={newName}
           onKeyDown={(e) => {
             if (e.key === 'Enter') {