The event is bound to the wrong element

[fontlos]

Problem

The event is bound to the wrong element. A click event that should belong to one element is bound to another element, and the original element loses its event binding

Steps To Reproduce

Steps to reproduce the behavior:

• I created a component like this

#[component]
pub fn ChatHistory(current_chat: Signal<u64>) -> Element {
    let history_list = [1,2,3];
    let history_list_display = history_list.iter().map(|item| {
        let date = *item;
        rsx!(
            div { class: "chat-item",
                key: date,
                onclick: move |_| {
                    current_chat.set(date);
                },
            }
        )
    });
    rsx! (
        div { class: "chat-history",
            {history_list_display}
            button { class: "add",
                onclick: move |_| {
                    current_chat.set(0);
                }
            }
        }
    )
}

This renders a list of three elements and a button, both of which are bound to a click event.

The click event for the first and third element in the list is working, but the click event for the second element is not, and I found that it is incorrectly bound to the click event that belongs to the button by adding some debugging information

And judging from the browser debugging tool, there is no click event bound to the button at all!

• When I made the following changes

#[component]
pub fn ChatHistory(current_chat: Signal<u64>) -> Element {
    let add_button = rsx!(
        button { class: "add",
            onclick: move |_| {
                current_chat.set(0);
            }
        }
    );

    let history_list = [1,2,3];
    let history_list_display = history_list.iter().map(|item| {
        let date = *item;
        rsx!(
            div { class: "chat-item",
                key: date,
                onclick: move |_| {
                    current_chat.set(date);
                },
            }
        )
    });
    rsx! (
        div { class: "chat-history",
            {history_list_display}
            {add_button}
        }
    )
}

button directly replaces the second element in the list

Expected behavior

The list is correctly bound to the list's own click events, and the button is also correctly bound to its own click events

Screenshots

Here's a screenshot of the browser debugging tool for both of my codes

Environment:

• Dioxus version: 0.6.0-alpha.2
• Rust version: 1.83.0-nightly
• OS info: Windows 11 26100.2152
• App platform: desktop

Questionnaire

• [x] 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

[fontlos]

I could fix this by wrapping a more div tag around {history_list_display}, but why not do it and it won't work

[ealmloff]

I can reproduce the first issue in third alpha, but the second issue seems to be fixed. Here is a reproduction of the first issue that can be run in isolation:

use dioxus::prelude::*;

#[component]
pub fn ChatHistory() -> Element {
    let history_list = [1,2,3];
    let history_list_display = history_list.iter().map(|item| {
        let date = *item;
        rsx!(
            button { class: "chat-item",
                key: "{date}",
                onclick: move |_| {
                    tracing::info!("Clicked on {}", date);
                },
            }
        )
    });
    rsx! (
        div { class: "chat-history",
            {history_list_display}
            button { class: "add",
                onclick: move |_| {
                    tracing::info!("Clicked on 0");
                }
            }
        }
    )
}

fn main() {
    dioxus_logger::init(tracing::Level::DEBUG);
    launch(ChatHistory)
}

[ealmloff]

I think this is another case of https://github.com/DioxusLabs/dioxus/issues/2809 for attributes instead of elements