fix(auth): auto-focus passkey input for mobile autofill

Remove readonly and auto-focus the username webauthn input so mobile
browsers show passkey suggestions immediately when the sign-in modal
opens, matching the desktop experience.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-04-15 21:29:40 -04:00
parent efe3615228
commit 3ec8ac5308
1 changed files with 6 additions and 3 deletions

View File

@ -550,7 +550,11 @@ export function showAuthModal(callbacks?: Partial<AuthModalCallbacks>): void {
abortConditional(); abortConditional();
overlay.innerHTML = mode === 'signin' ? renderSignIn() : renderRegister(); overlay.innerHTML = mode === 'signin' ? renderSignIn() : renderRegister();
attachModalListeners(); attachModalListeners();
if (mode === 'signin') startConditional(); if (mode === 'signin') {
startConditional();
// Auto-focus the passkey input so mobile shows autofill suggestions
setTimeout(() => (overlay.querySelector('#auth-signin-username') as HTMLInputElement)?.focus(), 100);
}
} }
function abortConditional() { function abortConditional() {
@ -628,9 +632,8 @@ export function showAuthModal(callbacks?: Partial<AuthModalCallbacks>): void {
class="rspace-auth-modal__input" class="rspace-auth-modal__input"
id="auth-signin-username" id="auth-signin-username"
type="text" type="text"
placeholder="Select a saved passkey..." placeholder="Tap to see saved passkeys..."
autocomplete="username webauthn" autocomplete="username webauthn"
readonly
/> />
<div class="rspace-auth-modal__divider">or</div> <div class="rspace-auth-modal__divider">or</div>
<div class="rspace-auth-modal__actions"> <div class="rspace-auth-modal__actions">