Closed 0thElement closed 3 weeks ago
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(),
...
}
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?
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.
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:
fn App() -> Element { rsx! { Router:: {}
}
}
[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" } } }