isDirty not changing when using defaultValues inside useForm

[keanan]

Hello,

I have tried to follow the examples and not sure what the issue is but I am using defaultValues inside useForm and isDirty does not change when using defaultValues. Please could someone assist if possible, thanks.

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { isDirty, isValid },
  } = useForm({
    defaultValues: {
      firstName: "firstName",
    },
  });
  const onSubmit = (data) => console.log(data);

  console.log(isDirty, isValid);

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("firstName")} placeholder="First Name" />
         <input disabled={!isDirty} type="submit" />
      </form>
    </div>
  );
}

Sandbox URL

[sujinleeme]

@keanan The codesandbox link is broken or it seems it's not on public. Shall you update the url again?

[keanan]

Thanks @sujinleeme I have updated the URL.

[sujinleeme]

The <input disabled={!isDirty} type="submit" /> works well as expected.

You may forget to add the CSS :disabled selector of the submit button.

input:disabled {
  opacity: 0.4;
}

[keanan]

Hi @sujinleeme thanks, but the issue I am facing is that isDirty should be true when defaultValues are supplied with useForm. Currently it does not change state so the submit button is always disabled even when all form inputs are pre-populated.

[sujinleeme]

Only providing defaultValue won't change isDirty because a comparison between defaultValue and current formValues will be made.
To update the formValues at first, you must use setValue or reset.

  const {
    reset,
  } = useForm({
    defaultValues: {
      firstName: "",  // The value shouldn't be `test`. defaultValues can be omitted. 
    },
    mode: "onChange",
  });
  
  useEffect(() => {
    reset(
      {
        firstName: "test",
      },
      { keepDefaultValues: true }
    );
  }, [reset]);

Here is the codesandbox.

[keanan]

That is good to know, thanks for your help @sujinleeme 🙇‍♂️