onsubmit is not called when form is child of router

stevenliebregt commented 2 years ago

Problem

When using a router and a separate function (Component?) with a form in it, the onsubmit is never called.

Steps To Reproduce

Steps to reproduce the behavior:

Have the below code

use dioxus::prelude::*;

fn main() {
    dioxus::desktop::launch(app);
}

fn app(cx: Scope) -> Element {
    cx.render(rsx! (
        Router {
            ul {
                Link { to: "/", li { "Home" } },
            }
            Route { to: "/" Home {} },
        }
    ))
}

fn Home(cx: Scope) -> Element {
    cx.render(rsx! {
        div {
            h1 { "Form" }
            form {
                onsubmit: move |ev| println!("Submitted {:?}", ev.values),
                oninput: move |ev| println!("Input {:?}", ev.values),
                input { r#type: "text", name: "username" }
                input { r#type: "text", name: "full-name" }
                input { r#type: "password", name: "password" }
                button { "Submit the form" }
            }
        }
    })
}

Type something in the input fields, you'll see some console output as expected
Press the submit button, you should see a "Submitted ..." in the console, but nothing is there

Expected behavior

I expect the onsubmit to be called even if the form is in a separate function.

Screenshots

Not applicable

Environment: