Fix issue #144: Set cursor focus to IP address field when adding/editing hosts
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>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user