From 60fb70ad5f617ca92e1a0a679b5c0b210a4dd41f Mon Sep 17 00:00:00 2001
From: ZacharyZcR <zacharyzcr1984@gmail.com>
Date: Sun, 7 Sep 2025 15:29:32 +0800
Subject: [PATCH] Fix issue #144: Set cursor focus to IP address field when
 adding/editing hosts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Problem: When opening Add Host or Edit Host, cursor was not focusing on any field,
making it less convenient for users to start entering connection details.

Root cause: The react-hook-form field spread operator {...field} was overriding
our custom ref, preventing proper ref binding to the IP input element.

Solution:
- Use function ref to properly bind both react-hook-form ref and our custom ref
- Set focus on component mount and when editingHost changes
- Focus on IP address field as it's the first logical field in connection details
- Use 300ms timeout to ensure DOM rendering is complete

Now when users click "Add Host" or edit a host, the cursor automatically
focuses on the IP address input field for better UX.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../Host Manager/HostManagerHostEditor.tsx    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/ui/Desktop/Apps/Host Manager/HostManagerHostEditor.tsx b/src/ui/Desktop/Apps/Host Manager/HostManagerHostEditor.tsx
index 3f1914fd..16aa4412 100644
--- a/src/ui/Desktop/Apps/Host Manager/HostManagerHostEditor.tsx	
+++ b/src/ui/Desktop/Apps/Host Manager/HostManagerHostEditor.tsx	
@@ -256,13 +256,22 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos
 
     // 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);
+        }, 300);
 
+        return () => clearTimeout(focusTimer);
+    }, []); // Focus on mount
+
+    // Also focus when editingHost changes (for tab switching)
+    useEffect(() => {
+        const focusTimer = setTimeout(() => {
+            if (ipInputRef.current) {
+                ipInputRef.current.focus();
+            }
+        }, 300);
         return () => clearTimeout(focusTimer);
     }, [editingHost]);
 
@@ -443,9 +452,12 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos
                                                 <FormLabel>{t('hosts.ipAddress')}</FormLabel>
                                                 <FormControl>
                                                     <Input 
-                                                        ref={ipInputRef}
                                                         placeholder={t('placeholders.ipAddress')} 
-                                                        {...field} 
+                                                        {...field}
+                                                        ref={(e) => {
+                                                            field.ref(e);
+                                                            ipInputRef.current = e;
+                                                        }}
                                                     />
                                                 </FormControl>
                                             </FormItem>