useSubmit function not calling Action upon form submission

[santafecap]

Hello All

I am really struggling on why this is not working.

I am attempting a simple form submission which should kick off the Action function to input data into an external database (GCP Firestore).

export const action = async ({ request }) => {
  const form = await request.formData();
  const searchTerms = form.get("search");
  const exclusionTerms = form.get("exclusion");
  
  //put into firestore
  ...

  return json({
    message: "Saved"
  });

};
export default function Index() {
  ...
  const loadData = useLoaderData();
  const actionData = useActionData<typeof action>();
  const submit = useSubmit();
  ...
  const handleSubmit = () => submit({
      search: search,
      exclusion: exclusion
    }, 
    { method: "POST" });


  return (
                  <Form method="POST" onSubmit={handleSubmit}>
                    <FormLayout>
                       <TextField
                        value={search}
                        label="Search Terms. Use AND/OR as needed"
                        type="text"
                        name="search"
                        onChange={handleSearchChange}
                      />
                      <TextField
                        value={exclusion}
                        label="Exclusion Terms"
                        type="text"
                        name="exclusion"
                        onChange={handleExclusionChange}
                        }
                      />
                    </FormLayout>
                    <Button variant="primary" loading={isLoading} >Save</Button>
                     {actionData ? actionData.message : null}
                  </Form>
               
)

From what I understand, the onSubmit should trigger the handleSubmit function which in turns call the action block. But nothing is happening.

Any insights would be really appreciate.

[santafecap]

ok somehow after a couple hours of struggling, stepping away to do school pickup, and returned to find that the problem is attaching onSubmit to Form. Everything is working as expected when instead calling handleSubmit by using onClick on the Button.

[onursagir]

But that doesn't quite solve the problem if people use enter to submit the form