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:
parent
efe3615228
commit
3ec8ac5308
|
|
@ -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">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue