From f6ba5953e91604b00888e3306715fc5d91b0daf2 Mon Sep 17 00:00:00 2001
From: cbh778899 <cbh778899@outlook.com>
Date: Wed, 16 Oct 2024 15:59:15 +1100
Subject: [PATCH] when start edit, select all texts

Signed-off-by: cbh778899 <cbh778899@outlook.com>
---
 src/components/chat/TitleBar.jsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/TitleBar.jsx b/src/components/chat/TitleBar.jsx
index 670a8ba..b36c870 100644
--- 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>: