fix: schedule ActionForm submit handler to run after user submit handlers (closes #3872)

[gbj]

No description provided.

[paul-hansen]

Looks like calling prevent_default inside request_animation_frame doesn't work since request_animation_frame isn't blocking, so the on submit handler completes and calls the browser's default submit before request_animation_frame's callback is called. I tested this branch locally and confirmed it caused duplicated requests due to browser's default handler still being called and also caused a navigation to happen outside the Leptos router.

My fault for suggesting delaying the on submit without thinking through the fact that we would still need to prevent the browser's default behavior (which can't be done in a delayed way afaik) and calling prevent_default would prevent the user's handler.

I don't know of a workable solution to this at the moment. Thinking on it.

[gbj]

@paul-hansen Just checking, which browser were you testing this under?

[paul-hansen]

Firefox, though I just tested under chrome and I get the same thing. (Don't forget to check the "preserve log" on the network tab in chrome or it will hide the extra request because the page load resets the network log by default.)

In case any of this matters:
Arch Linux
Chrome Version 138.0.7204.92
Firefox 140.0.2 (64-bit)

Lmk and I can try making a minimal repro if you aren't seeing the same. Currently just testing with my project so maybe something is affecting it there.

[gbj]

Huh. Weird. I just tried it with this diff in the server_fns_axum and it seems to work as intended in Firefox and in Chrome: i.e., no network request is made, the server function doesn't run, and the log appears in the console.

--- a/examples/server_fns_axum/src/app.rs
+++ b/examples/server_fns_axum/src/app.rs
@@ -224,7 +224,7 @@ pub fn WithActionForm() -> impl IntoView {
             <code>"<form>"</code>
             "to call a server function in a way that gracefully degrades."
         </p>
-        <ActionForm action>
+        <ActionForm action on:submit=|ev| {
+            ev.prevent_default();
+            leptos::logging::log!("did it submit?");
+        }>
             <input
                 // the `name` of the input corresponds to the argument name
                 name="text"

[paul-hansen]

Looks like it's because I'm using a browser confirmation dialog.
I tried your example and you are right but when I add a confirmation dialog like this:

        <ActionForm action on:submit=|ev| {
            let success = window()
                .confirm_with_message("hello world")
                .unwrap_or_default();
            if !success {
                ev.prevent_default();
                leptos::logging::log!("default prevented");
            }
        }>

When I submit and choose "ok", I see two requests, one with a 302 status and one with 200.

[paul-hansen]

Came up with a potential alternative in #4131 feel free to use parts of it or anything if you have better ideas.