when start edit, select all texts

Signed-off-by: cbh778899 <[email protected]>
SkywardAI · Oct 16, 2024 · f6ba595 · f6ba595
1 parent c541120
commit f6ba595
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/src/components/chat/TitleBar.jsx b/src/components/chat/TitleBar.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { PencilFill } from "react-bootstrap-icons";
 import { XCircle } from "react-bootstrap-icons";
 import { CheckCircle } from "react-bootstrap-icons";
@@ -7,6 +7,8 @@ export default function TitleBar({current_title, updateTitle}) {
     const [title, setTitle] = useState(current_title);
     const [is_editing, toggleEditTitle] = useState(false);
 
+    const inputRef = useRef(null);
+
     function submitUpdateTitle() {
         if(is_editing && title !== current_title) {
             updateTitle(title);
@@ -18,12 +20,19 @@ export default function TitleBar({current_title, updateTitle}) {
         setTitle(current_title);
     }, [current_title])
 
+    useEffect(()=>{
+        if(is_editing && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [is_editing])
+
     return (
         <div className="title-bar">
             {
                 is_editing ? 
                 <form onSubmit={evt=>{evt.preventDefault(); submitUpdateTitle()}}>
-                    <input className="edit-title" value={title} onChange={evt=>setTitle(evt.target.value)} />
+                    <input className="edit-title" ref={inputRef} value={title} onChange={evt=>setTitle(evt.target.value)} />
                     <CheckCircle className="btn clickable" onClick={submitUpdateTitle} />
                     <XCircle className="btn clickable" onClick={()=>{setTitle(current_title); toggleEditTitle(false)}} />
                 </form>: