Shadcn input focus shift issue

Answered

Allegheny mound ant posted this in #help-forum

Allegheny mound antOP

2024-02-18T15:45:50.000Z

Hey Guys Im using shadcn in nextjs14 app router. I'm just facing literally wierd input focus bug in shadcn form . Im using Shadcn form, React hook forms and zod validation.

Answered by Anay-208

Mark message as a solution

View full answer

34 Replies

Allegheny mound antOP

2024-02-18T15:47:20.000Z

Check this video

Can somebody explain how do I stop this weird behavior ??

my form code:

function LoginPage() {
  const form = useForm<TLoginSchema>({
    resolver: zodResolver(LoginSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

  const loginSubmit = (data: TLoginSchema) => {};

  return (
    <AuthWrapper
      headerLabel="Welcome to Login form"
      additionalBtnHref="/auth/register"
      additionalBtnLabel="Dont have account? "
    >
      <Form {...form}>
        <form onClick={form.handleSubmit(loginSubmit)} className="space-y-8">
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input
                    placeholder="Enter your email"
                    type="email"
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="password"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Password</FormLabel>
                <FormControl>
                  <Input
                    placeholder="Enter your password"
                    type="email"
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </form>
      </Form>
    </AuthWrapper>
  );
}

schema.ts:

import { z } from "zod";

export const LoginSchema = z.object({
  email: z.string().email({
    message: "Email is required!!",
  }),
  password: z.string().min(6, {
    message: "Password must be greater than 6 letters",
  }),
});

export type TLoginSchema = z.infer<typeof LoginSchema>;

Anay-208

2024-02-18T15:50:15.000Z

Can you tell how to reproduce it

Allegheny mound antOP

2024-02-18T15:50:43.000Z

Yeah, you can directly use the shadcn form with react hook forms and zod validation

@Anay-208 Can you tell how to reproduce it

Anay-208

2024-02-18T15:51:30.000Z

Allegheny mound antOP

2024-02-18T15:54:25.000Z

Yeah, Im simple used the shadcn form :
1. Define the schema ex: LoginSchema
2. Configure for react form hook
3. Use the form elements of shadcn to create the form.

@Allegheny mound ant schema.ts: ts import { z } from "zod"; export const LoginSchema = z.object({ email: z.string().email({ message: "Email is required!!", }), password: z.string().min(6, { message: "Password must be greater than 6 letters", }), }); export type TLoginSchema = z.infer<typeof LoginSchema>;

Allegheny mound antOP

2024-02-18T15:54:55.000Z

this is the schema

"use client";
import AuthWrapper from "@/components/auth/AuthWrapper";
import { LoginSchema, TLoginSchema } from "@/lib/Types/schemas";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";

function LoginPage() {
  const form = useForm<TLoginSchema>({
    resolver: zodResolver(LoginSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

  const loginSubmit = (data: TLoginSchema) => {};

  return (

      <Form {...form}>
        <form onClick={form.handleSubmit(loginSubmit)} className="space-y-8">
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input
                    placeholder="Enter your email"
                    type="email"
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="password"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Password</FormLabel>
                <FormControl>
                  <Input
                    placeholder="Enter your password"
                    type="email"
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </form>
      </Form>

  );
}

export default LoginPage;