Problem to dispatch handleSubmit outside submit event.

[gabrielgrs]

Hello!

I have a listing scenario, where I use the react-hook-form library to control the filters. Within this filter, there are two scenarios, one where the user can perform a search, thus resetting the API return and making a new call, made through the form's onSubmit itself. However, there is a call that brings 10 more records, on top of the existing filter, where in this "load more", I cannot trigger the handleSubmit event.

I read in some places that it should work using just handleSubmit() with a callback function inside, but apparently I'm doing something wrong.

I tried to simulate a similar behavior into codesandbox, here's the link: https://3rxdgs.csb.app/

import { useState } from "react";
import { useForm } from "react-hook-form";

const defaultValues = {
  name: ""
};

export default function App() {
  const [list, setList] = useState<string[]>([]);

  const { handleSubmit, register } = useForm({
    defaultValues
  });
  const onSubmit = ({ name }: typeof defaultValues, keepList: boolean) => {
    if (keepList) setList((p) => [...p, name]);
    else setList([name]);
  };

  const outsideCall = () => {
    handleSubmit((values) => {
      console.log("heeey, call me please");
      onSubmit(values, true);
    });
  };

  return (
    <div>
      <form onSubmit={handleSubmit((values) => onSubmit(values, false))}>
        <input {...register("name")} placeholder="Type your name" />
        <br />
        <button type="submit">Submit</button>
        <br />
        <button type="button" onClick={outsideCall}>
          Outside call
        </button>
      </form>
      <hr />
      <pre>{JSON.stringify({ list }, null, 2)}</pre>
    </div>
  );
}

[gabrielgrs]

Ok, I solved this by placing it directly in the button's onClick and transforming it into a submit type and placing a second parameter in onSubmit

 <button type="submit" onClick={handleSubmit(values => onSubmit(values, true))}>
   Outside call
 </button>

[Moshyfawn]

You might be able to leverage the HTML form button attribute to submit your form form outside the form element and check which button was clicked.

function Form() {
  const { handleSubmit } = useForm()

  function onSubmit(data, event) {
    console.log(event.nativeEvent.submitter.name)
  }

  return (
    <>
      <form id="my-form" onSubmit={handleSubmit(onSubmit)}>
        <button type="submit" name="inside">
          Submit Inside
        </button>
      </form>
      <button type="submit" name="outside">
        Submit Outside
      </button>
    </>
  )
}