Prevent default redirect on web forms

[ealmloff]

Prevent the default redirect behavior of forms in the web renderer to match the desktop renderer, and documentation (the guide and examples)

Fixes #924

[kylerlaird]

Does this allow the option of standard form submission or not (by returning false in JavaScript)?
https://www.tutorialspoint.com/How-to-stop-form-submission-using-JavaScript

[ealmloff]

Does this allow the option of standard form submission or not (by returning false in JavaScript)? https://www.tutorialspoint.com/How-to-stop-form-submission-using-JavaScript

Adding prevent default will now make the form submit. In the original example, if you wanted the form to redirect you could use:

use dioxus::prelude::*;

fn main() {
    dioxus_web::launch(app);
}

fn app(cx: Scope) -> Element {
    cx.render(rsx!(
        body {
            form {
                prevent_default: "onsubmit",
                onsubmit: move |event| {
                    println!("Submitted! {event:?}")
                },
                input { name: "name", },
                input { name: "age", },
                input { name: "date", },
                input { r#type: "submit", },
            }

        }
    ))
}

[kylerlaird]

Thank you for the update. I'm not much of a JavaScript or Rust programmer, so I'll appreciate remedial explanations.

Adding "prevent_default" will now make the form submit (which is the default behavior)? That seems backward to me.

Is the onsubmit handler able to specify whether or not the form submits normally after the handler completes (such as returning false in JavaScript)?

[ealmloff]

Adding "prevent_default" will now make the form submit (which is the default behavior)? That seems backward to me.

I agree making the default different from JavaScript could be unexpected, but I don't see a different solution while maintaining consistency between different platforms.

Dioxus supports two main renderers right now: Web and Desktop. For the web renderer, making redirecting the default behavior might make sense, but for the desktop renderer redirecting out of the application into the browser does not make sense. In other renderers, like the Blitz and TUI renderers, there is no concept of redirecting at all so the default form behavior makes even less sense.

Is the onsubmit handler able to specify whether or not the form submits normally after the handler completes (such as returning false in JavaScript)?

There is currently no way to conditionally prevent default on events. If we added this feature it would still leave issues with the default form behavior on web breaking the desktop renderer.

I'm open to other ideas, but I think a solution that is cross platform by default should be preferred.

[jkelleyrtp]

I'd rather not override default behavior for web. I think it makes sense to do it for desktop/mobile since the experience would be completely jarring, but for web we want to match whatever the standard is. What would make more sense is to automatically prevent default if the event handler is present since... why would you want to handle the event if the page is redirected?