question: Issue using Controller component with FormProvider

[RiyaadHossain]

Version Number

v7

Codesandbox/Expo snack

https://codesandbox.io/p/github/RiyaadHossain/Jobster/main

Steps to reproduce

I'm using the React Hook Form in my React application.
I used the custom Form and FormInputIcon components in my project.

Form component:

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

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

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

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

  const onSubmit = (data) => {
    submitHandler(data);
    reset();
  };

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

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

FormInputIcon component:

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

export default function FormInputIcon({
  id,
  icon,
  name,
  type,
  value,
  placeholder,
}) {
  const {
    control,
    // formState: { errors },
  } = useFormContext();

  // console.log({ FromInputIcon: errors });
 

  return (
    <div className="relative flex items-center mb-4">
      {icon}
      <Controller
        control={control}
        name={name}
        render={({ field }) => (
          <input
            {...field}
            name={name}
            id={id}
            type={type}
            placeholder={placeholder}
            className={`w-full`}
            // value={value ? value : field.value} // I used it in case I needed to set default values, but later on removed it.
          />
        )}
      />
    </div>
  );
}

SignInModal 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";

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} className="w-full mt-6">
        <FormInputIcon
          id="email_sign_in"
          name="email"
          placeholder="Email"
          type="email"
          icon={<IoMail className="input_icon" size={18} />}
        />
        <FormInputIcon
          id="password_sign_in"
          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>
  );
}

Now the problem is when I click on the Continue button on the SignInModal it doesn't reset the input field value. Even though I used the reset function in the Form component.
Here:

  const onSubmit = (data) => {
    submitHandler(data);
    reset();
  };

Note that, I also console.log the input data. In the console, it gets cleared but on the display, it still shows the text that I typed.
Also, I'm getting a warning in the console.

What's the issue? React

Expected behaviour

The reset function should work properly as well the warning message should be removed.
Also, there needs the functionality to work when using defaultValues.

What browsers are you seeing the problem on?

Chrome

Relevant log output

{email: '[email protected]', password: 'asdfasdf'}
{email: undefined, password: undefined}

Code of Conduct

• I agree to follow this project's Code of Conduct

[Moshyfawn]

I've not looked into your sandbox yet, but the first thing you should try is to provide the default values to reset

[RiyaadHossain]

I've not looked into your sandbox yet, but the first thing you should try is to provide the default values to reset

@Moshyfawn, Already there in the code: useEffect(() => reset(defaultValues), [defaultValues, reset, methods]);

[Moshyfawn]

Oh man, you put your entire project as the reproduction sandbox and I can't even find the code you referenced in your issue. Please consider creating a minimal reproduction sandbox instead.