bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: prevent username input from unmounting during typing in login form

Browse Source 
The username input was conditionally hidden when it had a value, causing
the field to disappear and focus to jump to password when typing. Fixed by:
1. Always rendering the username input (removed conditional)
2. Using controlled input with value prop
3. Only auto-focus password when username is already entered

This fixes the focus-jumping bug that made it impossible to enter usernames.
This commit is contained in:
Daniel Bedeleanu
2026-04-21 17:54:19 +03:00
parent 904e153d8a
commit 6bf95a0df0
2 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.claude/settings.local.json
View File

@@ -85,7 +85,11 @@
"Bash(grep -E \"\\\\.\\(py|ts\\)$\")", "Bash(grep -E \"\\\\.\\(py|ts\\)$\")",
"Bash(grep -E \"\\\\.py$\")", "Bash(grep -E \"\\\\.py$\")",
"Bash(git worktree *)", "Bash(git worktree *)",
"Bash(npm list *)" "Bash(npm list *)",
"Bash(netstat -tulpn)",
"Bash(curl -k -v https://192.168.84.131:8918/users/)",
"Bash(curl -k -s https://192.168.84.131:8918/users/)",
"Bash(grep -E \"\\\\.\\(tsx|ts|jsx|js\\)$\")"
] ]
} }
} }

29
frontend/app/login/page.tsx
View File

@@ -209,21 +209,20 @@ export default function LoginPage() {
</div> </div>
</div> </div>
{!selectedUserForLogin.username && ( <div className="space-y-2">
<div className="space-y-2"> <label className="text-xs font-normal text-muted px-1">Username</label>
<label className="text-xs font-normal text-muted px-1">Username</label> <div className="relative">
<div className="relative"> <User className="absolute left-4 top-1/2 -translate-y-1/2 text-muted" size={16} />
<User className="absolute left-4 top-1/2 -translate-y-1/2 text-muted" size={16} /> <input
<input type="text"
type="text" autoFocus
autoFocus value={selectedUserForLogin.username || ""}
onChange={(e) => setSelectedUserForLogin({...selectedUserForLogin, username: e.target.value})} onChange={(e) => setSelectedUserForLogin({...selectedUserForLogin, username: e.target.value})}
className="w-full bg-slate-800/50 border border-slate-800 focus:border-primary rounded-2xl py-4 pl-12 pr-4 text-white focus:outline-none transition-all placeholder:text-slate-700 font-mono" className="w-full bg-slate-800/50 border border-slate-800 focus:border-primary rounded-2xl py-4 pl-12 pr-4 text-white focus:outline-none transition-all placeholder:text-slate-700 font-mono"
placeholder="Admin" placeholder="Admin"
/> />
</div>
</div> </div>
)} </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-normal text-muted px-1">Password</label> <label className="text-xs font-normal text-muted px-1">Password</label>
@@ -233,7 +232,7 @@ export default function LoginPage() {
ref={localPassRef} ref={localPassRef}
data-testid="local-password-input" data-testid="local-password-input"
type="password" type="password"
autoFocus autoFocus={!!selectedUserForLogin.username}
onKeyDown={(e) => e.key === 'Enter' && handleLogin()} onKeyDown={(e) => e.key === 'Enter' && handleLogin()}
className="w-full bg-slate-800/50 border border-slate-800 focus:border-primary rounded-2xl py-4 pl-12 pr-4 text-white/50 focus:text-white focus:outline-none transition-all placeholder:text-slate-700 font-mono" className="w-full bg-slate-800/50 border border-slate-800 focus:border-primary rounded-2xl py-4 pl-12 pr-4 text-white/50 focus:text-white focus:outline-none transition-all placeholder:text-slate-700 font-mono"
placeholder="Enter password" placeholder="Enter password"