Prevent calling handleSubmit method when reset is invoked

[amansharma-mo]

Hello all,

I want to initialize the defaultValues of a form from user data I am getting from the backend. The form is used to edit a single user data so I want the form fields pre-filled with the user's data. My flow is I get the users from backend, then I use useEffect like:

 useEffect(() => {
    setUser(userData?.[0]);
  }, [userData]);

where [user, setUser] are from useState

My useForm is as:

  const formMethods = useForm<IUserFormFields>(
    {
      mode: 'onBlur',
      reValidateMode: 'onChange',
      criteriaMode: 'all',
      defaultValues: {
        name: '',
        title: '',
        preferences: {},
      },
    },
  );

This is how I am updating the defaultValues of the form so it pre-fills the data of the user that is being edited.

  useEffect(() => {
    reset({
      name: user?.name,
      title: user?.description,
      preferences: makePrefrences(user?.pref),
    });

  }, [user, reset]);

A list of users is loaded in a leftnav, and as a super user I am able to select any user to edit via the state change setUser(selectedUser). My problem is every time I change the user from the initial load, the form submits and executes everything in the handleSubmit method. Is there a way to prevent this?

[Moshyfawn]

You probably haven't set the reset button inside your form element to type="button", which makes it type="submit" by default according to HTML standards.

[amansharma-mo]

I don't have a reset button, I am invoking reset via useEffect every time I as the superuser change the user to edit so the defaultValues are updated and form pre-fills the values of the user.

[amansharma-mo]

Appreciate that quick response!

[Moshyfawn]

Fair enough, although it shouldn't trigger the form submission then. Could you reproduce it in a minimal codesadbox?

[amansharma-mo]

Sure let me set that up.

[amansharma-mo]

Your intuition about type=button was right. Here's the codesandbox: https://codesandbox.io/p/sandbox/react-hook-reset-hn6jhk

In my case the buttons being mapped needed an explicit type=button where as in the csb they did not. In both cases, (mine and csb) I used the native button element. Wonder why it did that.