hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Enter key not submitting login form

Browse Source 
The submit button's `disabled` attribute prevented browsers from firing
implicit form submission (Enter key) per HTML spec. Move the canSubmit
guard into the onSubmit handler and use aria-disabled + visual styles
instead, so Enter works when fields are filled.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Devin Foley
2026-03-14 00:17:39 -07:00
parent bcce5b7ec2
commit 8a201022c0
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ui/src/pages/Auth.tsx
View File

@@ -57,8 +57,8 @@ export function AuthPage() {
const canSubmit = const canSubmit =
email.trim().length > 0 && email.trim().length > 0 &&
password.trim().length >= 8 && password.trim().length > 0 &&
(mode === "sign_in" || name.trim().length > 0); (mode === "sign_in" || (name.trim().length > 0 && password.trim().length >= 8));
if (isSessionLoading) { if (isSessionLoading) {
return ( return (
@@ -91,6 +91,7 @@ export function AuthPage() {
className="mt-6 space-y-4" className="mt-6 space-y-4"
onSubmit={(event) => { onSubmit={(event) => {
event.preventDefault(); event.preventDefault();
if (!canSubmit || mutation.isPending) return;
mutation.mutate(); mutation.mutate();
}} }}
> >
@@ -128,7 +129,12 @@ export function AuthPage() {
/> />
</div> </div>
{error && <p className="text-xs text-destructive">{error}</p>} {error && <p className="text-xs text-destructive">{error}</p>}
<Button type="submit" disabled={!canSubmit || mutation.isPending} className="w-full"> <Button
type="submit"
disabled={mutation.isPending}
aria-disabled={!canSubmit || mutation.isPending}
className={`w-full ${!canSubmit ? "opacity-50 pointer-events-none" : ""}`}
>
{mutation.isPending {mutation.isPending
? "Working…" ? "Working…"
: mode === "sign_in" : mode === "sign_in"