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

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

@@ -209,21 +209,20 @@ export default function LoginPage() {
</div>
</div>
{!selectedUserForLogin.username && (
<div className="space-y-2">
<label className="text-xs font-normal text-muted px-1">Username</label>
<div className="relative">
<User className="absolute left-4 top-1/2 -translate-y-1/2 text-muted" size={16} />
<input
type="text"
autoFocus
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"
placeholder="Admin"
/>
</div>
<div className="space-y-2">
<label className="text-xs font-normal text-muted px-1">Username</label>
<div className="relative">
<User className="absolute left-4 top-1/2 -translate-y-1/2 text-muted" size={16} />
<input
type="text"
autoFocus
value={selectedUserForLogin.username || ""}
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"
placeholder="Admin"
/>
</div>
)}
</div>
<div className="space-y-2">
<label className="text-xs font-normal text-muted px-1">Password</label>
@@ -233,7 +232,7 @@ export default function LoginPage() {
ref={localPassRef}
data-testid="local-password-input"
type="password"
autoFocus
autoFocus={!!selectedUserForLogin.username}
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"
placeholder="Enter password"