action not triggering

[smucode]

👋

If i navigate to a page via clicking my menu, the action function is not triggered when i click submit on this page. If I on the same page do a browser refresh, it works as expected. Anyone have a clue as to why this is happening?

My action:

export async function action({ request, params }: ActionArgs) {
  invariant(params.customerId, "customerId not found");
  await deleteCustomer({ id: params.customerId });
  return redirect("/customers");
}

My form is as simple as:

import { Form } from "@remix-run/react";
...
<Form>
  <button type="submit">Delete</button>
</Form>

Latest version, and opted into everything.

🤔

[kiliman]

Your action is only triggered on POST requests. You need to add method="post" to your <Form>

<Form method="post">
  <button type="submit">Delete</button>
</Form>

[smucode]

I know... Why it doesn't work on this particular page is strange. The app in question has plenty of routes where this work. Just not for this one specific route. And i can consistently reproduce it. Navigate to the page via a link. Doesn't work. Refresh the browser, it works. Every time 😵‍💫

It does indeed perform a GET request when it doesn't work. The console has no errors or warnings.

The terminal logs the following when it doesn't work:

GET /customers/cllw7j5j7008ipjit85005fnc?index=&_data=root 200 - - 15.040 ms
GET /customers/cllw7j5j7008ipjit85005fnc?index=&_data=routes%2Fcustomers.%24customerId 200 - - 69.722 ms
GET /customers/cllw7j5j7008ipjit85005fnc?index=&_data=routes%2Fcustomers.%24customerId._index 200 - - 70.326 ms

And this when it works:

POST /customers/cllw7j5j7008ipjit85005fnc?index=&_data=routes%2Fcustomers.%24customerId._index 204 - - 109.465 ms
GET /customers?_data=root 200 - - 39.076 ms
GET /customers?_data=routes%2Fcustomers._index 200 - - 20.272 ms

Not sure why there are multiple GETs logged tho 🤔

Noticed there is a small difference in the rendered <form>.

When it doesn't work the target is set to:

/customers/cllw7hhzh002upjit6l3wbron/?index

When it works the target is set to:

/customers/cllw7hhzh002upjit6l3wbron?index

Notice the missing trailing /.

So I guess it's hitting the wrong route for some reason. But still not sure why it works after a hard refresh of the page...

[smucode]

Some more details. So I have one route customers.$customerId.tsx where i check if the customer exists, and update the layout accordingly. Eg. the create and edit page are the same route, just with the special id new /customers/new/edit. But the edit page has a different layout to make the dialog appear without the menu.

The index page for customers are defined as customers.$customerId._index.tsx - this is where I have the action that's not triggered, and the form to trigger it.

I guess i'm just not doing it correctly somehow... 🤔

That it works after reload bothers me though 😅

[kiliman]

Ah, index routes are treated differently due to ambiguity. Try setting the action prop.
https://remix.run/docs/en/1.19.3/guides/routing#what-is-the-index-query-param

<Form method="post" action="?index">
...

[smucode]

Changing it to <Form method="post" action="?index"> didn't change the behavior unfortunately... 🤔

[smucode]

Using the full path did work however:

<Form method="post" action={`/customers/${data.customer.id}?index`}>

So I have a solution! Thanks @kiliman. But there seems to be another little issue there somewhere that I don't really understand...

[steinitz]

How about this odd scenario, maybe related: the form submission would only invoke the action function after I had added a call to useActionData. But then later, strangely, that wasn't the case.

On the other hand, maybe a relaunch via npm run dev would have allowed the action function to run without the call to useActionData. In other words, maybe useActionData just "primed the pump".

Probably not helpful but I wanted to share.

[kiliman]

That does seem odd. useActionData literally just looks in the Remix context to get the latest action result. It doesn't trigger a fetch, as that has already happened.

[steinitz]

Thanks @kiliman, that's helpful to know. Your earlier tip that action methods only run when the Form has method="post" has also helped me troubleshoot some issues. Oh and "index routes are treated differently" - very helpful.

This small thread contains several hard-to-discover facts. Thanks again.