I have a strange problem. In my login page, I can successfully login after entering user/pw but only when pressing the Enter key. The Login button is not clickable.
Actually, after trying some console.log/alert test buttons, even on different pages, it seems that no button works in my app.
Any ideas?
My Next.js version is 14.2.5.
Login page:
<code>"use client";
import { useFormState, useFormStatus } from "react-dom";
import { authenticate } from "@/app/actions";
export default function LoginForm() {
const [errorMessage, dispatch] = useFormState(authenticate, undefined);
return (
<form action={dispatch} className="space-y-3">
<div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
<h1 className=" mb-3 text-xl">Please log in to continue.</h1>
<div className="w-full">
<div>
<label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="email">
Username / Email
</label>
<div className="relative">
<input
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-4 text-sm outline-2 placeholder:text-gray-500"
id="email"
type="text"
name="email"
placeholder="Enter your username or email"
required
/>
</div>
</div>
<div className="mt-4">
<label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="password">
Password
</label>
<div className="relative">
<input
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-4 text-sm outline-2 placeholder:text-gray-500"
id="password"
type="password"
name="password"
placeholder="Enter password"
required
// minLength={6}
/>
</div>
</div>
</div>
<LoginButton />
<div className="flex h-8 items-end space-x-1" aria-live="polite" aria-atomic="true">
{errorMessage && (
<>
<p className="text-sm text-red-500">{errorMessage}</p>
</>
)}
</div>
</div>
</form>
);
}
function LoginButton() {
const { pending } = useFormStatus();
return (
<button
type="submit"
className="w-full cursor-pointer rounded-lg border border-slate-300 bg-orange-600 py-2
text-sm font-semibold text-white first-line:mt-4"
aria-disabled={pending}
>
Log in
</button>
);
}
</code>
<code>"use client";
import { useFormState, useFormStatus } from "react-dom";
import { authenticate } from "@/app/actions";
export default function LoginForm() {
const [errorMessage, dispatch] = useFormState(authenticate, undefined);
return (
<form action={dispatch} className="space-y-3">
<div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
<h1 className=" mb-3 text-xl">Please log in to continue.</h1>
<div className="w-full">
<div>
<label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="email">
Username / Email
</label>
<div className="relative">
<input
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-4 text-sm outline-2 placeholder:text-gray-500"
id="email"
type="text"
name="email"
placeholder="Enter your username or email"
required
/>
</div>
</div>
<div className="mt-4">
<label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="password">
Password
</label>
<div className="relative">
<input
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-4 text-sm outline-2 placeholder:text-gray-500"
id="password"
type="password"
name="password"
placeholder="Enter password"
required
// minLength={6}
/>
</div>
</div>
</div>
<LoginButton />
<div className="flex h-8 items-end space-x-1" aria-live="polite" aria-atomic="true">
{errorMessage && (
<>
<p className="text-sm text-red-500">{errorMessage}</p>
</>
)}
</div>
</div>
</form>
);
}
function LoginButton() {
const { pending } = useFormStatus();
return (
<button
type="submit"
className="w-full cursor-pointer rounded-lg border border-slate-300 bg-orange-600 py-2
text-sm font-semibold text-white first-line:mt-4"
aria-disabled={pending}
>
Log in
</button>
);
}
</code>
"use client";
import { useFormState, useFormStatus } from "react-dom";
import { authenticate } from "@/app/actions";
export default function LoginForm() {
const [errorMessage, dispatch] = useFormState(authenticate, undefined);
return (
<form action={dispatch} className="space-y-3">
<div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
<h1 className=" mb-3 text-xl">Please log in to continue.</h1>
<div className="w-full">
<div>
<label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="email">
Username / Email
</label>
<div className="relative">
<input
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-4 text-sm outline-2 placeholder:text-gray-500"
id="email"
type="text"
name="email"
placeholder="Enter your username or email"
required
/>
</div>
</div>
<div className="mt-4">
<label className="mb-3 mt-5 block text-xs font-medium text-gray-900" htmlFor="password">
Password
</label>
<div className="relative">
<input
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-4 text-sm outline-2 placeholder:text-gray-500"
id="password"
type="password"
name="password"
placeholder="Enter password"
required
// minLength={6}
/>
</div>
</div>
</div>
<LoginButton />
<div className="flex h-8 items-end space-x-1" aria-live="polite" aria-atomic="true">
{errorMessage && (
<>
<p className="text-sm text-red-500">{errorMessage}</p>
</>
)}
</div>
</div>
</form>
);
}
function LoginButton() {
const { pending } = useFormStatus();
return (
<button
type="submit"
className="w-full cursor-pointer rounded-lg border border-slate-300 bg-orange-600 py-2
text-sm font-semibold text-white first-line:mt-4"
aria-disabled={pending}
>
Log in
</button>
);
}
3