From f9891b8099c6a11b9573661072785f21df61ae7d Mon Sep 17 00:00:00 2001
From: ZacharyZcR <zacharyzcr1984@gmail.com>
Date: Sun, 7 Sep 2025 15:21:22 +0800
Subject: [PATCH] Fix issue #144: Set cursor focus to IP address field instead
 of username field

When adding or editing a host, the cursor now automatically focuses on the IP address field, which is the first field in the connection details section. This improves UX by allowing users to immediately start typing the most logical first piece of information.

Changes:
- Added useRef for IP address input field
- Added useEffect to focus IP field when component mounts or editingHost changes
- Uses setTimeout to ensure DOM is ready before focusing
- Works for both adding new hosts and editing existing hosts
---
 .../Host Manager/HostManagerHostEditor.tsx    | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/ui/Desktop/Apps/Host Manager/HostManagerHostEditor.tsx b/src/ui/Desktop/Apps/Host Manager/HostManagerHostEditor.tsx
index 9888a621..3f1914fd 100644
--- a/src/ui/Desktop/Apps/Host Manager/HostManagerHostEditor.tsx	
+++ b/src/ui/Desktop/Apps/Host Manager/HostManagerHostEditor.tsx	
@@ -61,6 +61,9 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos
     const [loading, setLoading] = useState(true);
 
     const [authTab, setAuthTab] = useState<'password' | 'key' | 'credential'>('password');
+    
+    // Ref for the IP address input to manage focus
+    const ipInputRef = useRef<HTMLInputElement>(null);
 
     useEffect(() => {
         const fetchData = async () => {
@@ -251,6 +254,18 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos
         }
     }, [editingHost, form]);
 
+    // Focus the IP address field when the component mounts or when editingHost changes
+    useEffect(() => {
+        // Use setTimeout to ensure the input is rendered before focusing
+        const focusTimer = setTimeout(() => {
+            if (ipInputRef.current) {
+                ipInputRef.current.focus();
+            }
+        }, 100);
+
+        return () => clearTimeout(focusTimer);
+    }, [editingHost]);
+
     const onSubmit = async (data: any) => {
         try {
             const formData = data as FormData;
@@ -427,7 +442,11 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos
                                             <FormItem className="col-span-5">
                                                 <FormLabel>{t('hosts.ipAddress')}</FormLabel>
                                                 <FormControl>
-                                                    <Input placeholder={t('placeholders.ipAddress')} {...field} />
+                                                    <Input 
+                                                        ref={ipInputRef}
+                                                        placeholder={t('placeholders.ipAddress')} 
+                                                        {...field} 
+                                                    />
                                                 </FormControl>
                                             </FormItem>
                                         )}