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();
overlay.innerHTML = mode === 'signin' ? renderSignIn() : renderRegister();
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() {
@ -628,9 +632,8 @@ export function showAuthModal(callbacks?: Partial<AuthModalCallbacks>): void {
class="rspace-auth-modal__input"
id="auth-signin-username"
type="text"
placeholder="Select a saved passkey..."
placeholder="Tap to see saved passkeys..."
autocomplete="username webauthn"
readonly
/>
<div class="rspace-auth-modal__divider">or</div>
<div class="rspace-auth-modal__actions">