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(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 {t('hosts.ipAddress')} - + )}