Why doesn't it work with the Shadcn library?

Question

I'm having trouble submitting a form while using the "shadcn" library, it just doesn't respond at all. When I'm testing without a library, the form is nicely sent and submitted. Is there anyone who can help me? I use Vite to develop an app via React.

Register Component:

import React from "react";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import {
  Form
} from "@/components/ui/form";
import LinkButton from "@/components/Button";
import Navbar from "@/components/Navbar";
import RegisterForm from "@/components/RegisterForm";


const schema = z
  .object({
    username: z.string().min(2),
    password: z.string().min(8),
    confirmPassword: z.string().min(8),
    email: z.string().email(),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "Passwords don't match",
    path: ["confirmPassword"],
  });

export const Register = () => {
  const navigate = useNavigate();
  const methods = useForm({
    resolver: zodResolver(schema),
    defaultValues: {
      email: "",
      username: "",
      password: "",
      confirmPassword: "",
    }
  })

  const { handleSubmit, control, formState: { isSubmitting } } = methods;

  const onSubmit = async (values) => {
    console.log("Form values:", values);
    const { username, password, email } = values;
    try {
      console.log("Attempting to register user...");
      const response = await axios.post("/api/auth/register", {
        username,
        email,
        password,
      });
      console.log(response.data);
      navigate("/login");
    } catch (error) {
      console.error("Error during registration:", error);
    }
  };
  console.log("Render Register component");
  return (
    <div>
      <Navbar />
      <div className="flex justify-center items-center h-screen">
        <Form {...methods}>
          <form
            onSubmit={handleSubmit(onSubmit)}
            className="space-y-6 p-4 xl:w-1/2 md:w-1/2 sm:w-1/2 xs:w-full xs:p-5 shadow-md"
          >
            <RegisterForm name="username" label="Username" placeholder="Username" inputType="username" formControl={control}/>
            <RegisterForm name="email" label="Email" placeholder="Email" inputType="email" formControl={control}/>
            <RegisterForm name="password" label="Password" placeholder="Password" inputType="password" formControl={control}/>
            <RegisterForm name="confirmPassword" label="Confirm Password" placeholder="Confirm Password" inputType="password" formControl={control}/>
            <LinkButton
              type="submit"
              className="w-full bg-bg-btn-prm"
              disabled={isSubmitting}
            >
             {isSubmitting ? "Loading..." : "Register"}
            </LinkButton>
          </form>
        </Form>
      </div>
    </div>
  );
};

RegisterForm component:

import React from 'react';
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from './ui/form';
import { Input } from './ui/input';

const RegisterForm = React.memo(({ name, label, placeholder, inputType = 'text', formControl }) => {
  console.log(`Rendering field: ${name}`);

  return (
    <FormField control={formControl} name={name} render={({ field }) => (
      <FormItem>
        <FormLabel>{label}</FormLabel>
        <FormControl>
          <Input placeholder={placeholder} type={inputType} {...field} />
        </FormControl>
        <FormMessage />
      </FormItem>
    )} />
  );
});

export default RegisterForm;

Answer 1

Try bellow method to find the error while submitting:

onSubmit={handleSubmit(onSubmit,(error) => { console.log('error => ', error) }}