Yup resolver is not working

[RiyaadHossain]

I'm using the React Hook Form.

I used custom components for form and form input. I also configured the Yup resolver for validation errors. But it's not working. However, the resolver is preventing the form from being submitted but it shows nothing in the errors object destructed from the formState object.

Full Code: https://codesandbox.io/p/github/RiyaadHossain/Jobster/main?file=%2Fsrc%2Fcomponents%2Fdashboard%2FAddEducation.jsx&workspaceId=fc8f1001-764a-4f12-b02e-922193188a43

Form Component:

import { useEffect } from "react";
import { FormProvider, useForm } from "react-hook-form";

export default function Form({
 children,
 submitHandler,
 defaultValues,
 resolver,
 className,
}) {
 const formConfig = {};

 if (!!defaultValues) formConfig["defaultValues"] = defaultValues;
 if (!!resolver) formConfig["resolver"] = resolver;

 const methods = useForm(formConfig);
 const { handleSubmit, reset } = methods;

 const onSubmit = (data) => {
  submitHandler(data);
  reset();
  // When clicking on the submit button default values are not being removed
 };

 useEffect(() => reset(defaultValues), [defaultValues, reset, methods]);

 return (
  <FormProvider {...methods}>
   <form onSubmit={handleSubmit(onSubmit)} className={className}>
    {children}
   </form>
  </FormProvider>
 );
}

FormInput Component:

import { useFormContext } from "react-hook-form";

export default function FormInput({
 id,
 type,
 name,
 label,
 inputRef,
 placeholder,
 divClass,
 inputClass,
 mandatory,
 defaultValue,
 handleOnChange,
}) {

 const {
  register,
  formState: { errors },
 } = useFormContext();

 console.log(errors); // not showing any error if clicking on submit not fulfilling any required input field

 return (
  <div className={`flex flex-col items-start mb-4 ${divClass}`}>
   {label && (
    <label
     htmlFor={id}
     className="text-[13px] font-medium leading-5 ml-2 mb-2"
    >
     {label} {mandatory && <span className="text-red-700">*</span>}
    </label>
   )}
   {!handleOnChange ? (
    <input
     {...register(name)}
     name={name}
     id={id}
     type={type}
     defaultValue={defaultValue}
     placeholder={placeholder}
     className={`w-full ${inputClass}`}
    />
   ) : (
    <input
     ref={inputRef}
     name={name}
     id={id}
     type={type}
     defaultValue={defaultValue}
     placeholder={placeholder}
     className={`w-full ${inputClass}`}
     onChange={(e) => handleOnChange(e.target.value, name)}
    />
   )}
  </div>
 );
}

SignInModal component where I used these above components:

import Modal from "../modal/Modal";
import signInImg from "../../assets/signin-fig.png";
import { ENUM_AUTH_MODAL } from "../../enums/authModal";
import FormInputIcon from "../form/FormInputIcon";
import { IoMail, IoLockClosed } from "react-icons/io5";
import Form from "../form/Form";
import { yupResolver } from "@hookform/resolvers/yup";
import { signInSchema } from "../../schema/signIn";

export default function SignInModal({ openAuthModal, setOpenAuthModal }) {
 const onSignUpHandle = () => setOpenAuthModal(ENUM_AUTH_MODAL.SIGN_UP);

 const onModalClose = () => {
  document.body.classList.toggle("overflow-y-hidden");
  setOpenAuthModal(null);
 };

 const onSubmit = async (data) => {
  try {
   console.log(data);
  } catch (error) {
   console.log(error);
  }
 };

 return (
  <Modal
   openModal={openAuthModal === ENUM_AUTH_MODAL.SIGN_IN}
   toggleModal={onModalClose}
  >
   <div className="">
    <img src={signInImg} alt="" className="modal_img" />
   </div>
   <h5 className="modal_title">Welcome Back!</h5>
   <Form
    submitHandler={onSubmit}
    resolver={yupResolver(signInSchema)}
    className="w-full mt-6"
   >
    <FormInputIcon
     name="email"
     placeholder="Email"
     type="email"
     icon={<IoMail className="input_icon" size={18} />}
    />
    <FormInputIcon
     name="password"
     placeholder="Password"
     type="password"
     icon={<IoLockClosed className="input_icon" size={18} />}
    />
    <button type="submit" className="btn_secondary w-full">
     Continue
    </button>
    <div className="text-center">
     <button
      onClick={(e) => {
       e.preventDefault();
       setOpenAuthModal(ENUM_AUTH_MODAL.FORGET_PASS);
      }}
      className="mt-6 text-sm font-light text-primary cursor-pointer"
     >
      Forget Password
     </button>
     <div className="mt-6 text-sm font-light">
      New to Jobster?
      <span
       onClick={onSignUpHandle}
       className="text-primary cursor-pointer ml-1"
      >
       Create an account
      </span>
     </div>
    </div>
   </Form>
  </Modal>
 );
}

Additionally, the signIn.js schema:

import * as yup from "yup";

export const signInSchema = yup.object/* ().shape */({
 email: yup.string().email().required("Email is required"),
 password: yup.string().required("Password is required"),
});

What's the issue with my code?

[Moshyfawn]

Unable to access this workspace

[fritx]

Finally got it to work:

useForm({
  // ...
  resolver: yupResolver(schema),
})
// ...
await trigger()
// Important Note: given time/ticks to make formState.errors working with yup schema
await sleep(0);
formState.errors // is ok with yup schema

// with util
export const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));

[fritx]

Sorry.. @RiyaadHossain ..I guess another thing important would be:

let { errors } = useFormState()
// or
let { formState: { errors } } = useFormContext()
// ...logic started here

as mentioned in official documentation: https://react-hook-form.com/docs/useformstate

RULES
Returned formState is wrapped with Proxy to improve render performance and skip extra computation if specific state is not > subscribed, so make sure you deconstruct or read it before render in order to enable the subscription.

const { isDirty } = useFormState() // ✅
const formState = useFormState() // ❌ should deconstruct the formState