shadcn/ui page reloads on form submit
I have this code to submit on enter on the form but the page reloads on the submit:
<Form {...textMessageForm}>
<form
onSubmit={textMessageForm.handleSubmit(
onTextMessageFormSubmit,
)}
className="w-10/12"
ref={formRef}
>
<FormField
control={textMessageForm.control}
name="message"
render={({ field }) => (
<FormControl>
<Input
className="ml-4 w-full bg-secondary p-2"
placeholder="Message ..."
onKeyUp={(event) => {
if (event.code === "Enter") {
event.preventDefault();
formRef.current?.submit();
}
}}
{...field}
/>
</FormControl>
)}
/>
</form>
</Form> <Form {...textMessageForm}>
<form
onSubmit={textMessageForm.handleSubmit(
onTextMessageFormSubmit,
)}
className="w-10/12"
ref={formRef}
>
<FormField
control={textMessageForm.control}
name="message"
render={({ field }) => (
<FormControl>
<Input
className="ml-4 w-full bg-secondary p-2"
placeholder="Message ..."
onKeyUp={(event) => {
if (event.code === "Enter") {
event.preventDefault();
formRef.current?.submit();
}
}}
{...field}
/>
</FormControl>
)}
/>
</form>
</Form>
