Nested Link nodes do not stop propagating events

[0thElement]

Problem

When two Link nodes are nested in each other, clicking on the topmost node sends event to both nodes, instead of just the top node. This results in the browser navigating to two different links.

Steps To Reproduce

Steps to reproduce the behavior:

1. Page setup:

#[derive(Clone, Routable, Debug, PartialEq)]
enum Route {
    #[route("/")]
    Home {},
    #[route("/login")]
    Login {},
    #[route("/signup")]
    SignUp {},
}

fn App() -> Element {
    rsx! {
        Router::<Route> {}
    }
}

#[component]
fn Home() -> Element {
    rsx! {
        Link { class: "flex bg-frame p-10", to: Route::Login {},
            p { "Login" }
            Link { class: "flex bg-primary w-full h-full p-10", to: Route::SignUp {},
                p { "Signup" }
            }
        }
    }
}

#[component]
fn Login() -> Element {
    rsx! {
        p { "login" }
    }
}

#[component]
fn SignUp() -> Element {
    rsx! {
        p { "signup" }
    }
}

2. On "/" page click on "Signup" button
3. Dioxus navigates to "/signup" and then "/login". Clicking back button returns to "/signup", and clicking again returns to "/"

Expected behavior

Navigates to the "/signup" page.

Screenshots

dioxus_report.mp4

Environment:

• Dioxus version: v0.5.1
• Rust version: 1.78
• OS info: Linux
• App platform: web

Questionnaire

• I'm interested in fixing this myself but don't know where to start
• I would like to fix and I have a solution
• I don't have time to fix this right now, but maybe later

[0thElement]

Thanks to the help from discord members, I can confirm that you can work around this issue by adding the following to the inner Link node.

Link {
    // add this
    onclick: |e: MouseEvent| e.stop_propagation(),
    ...
}

[i123iu]

Hello,
According to the HTML specification an a element mustn't be nested inside another a element.

Is the expected behaviour really to navigate to the inner link?
Maybe a warning/error would be more appropriate.

In which case would you want to nest two links?

[jkelleyrtp]

Links are not supposed to be nested - this is not an issue on the Dioxus side of things. The stop_propagation workaround does fix this for this particular case, however, you shouldn't be nesting links in the first place. We could warn if a link is nested within another link, but I think the browser will also warn you.