Inappropriate behavior in button's onclick event

[victor138128]

Problem

When using a for loop to draw the UI and create a structure that places a button underneath from dioxus-cli 0.6.0-alpha.3, The button's onclick event points to the second element of the for statement, not the button.

Steps To Reproduce

Steps to reproduce the behavior:

• Place each element within the for statement
• Place a button at the bottom of the for statement
• Create onclick event on button
• At this time, check if the onclick event is attached to the button when the button is clicked.

Expected behavior

onclick event is normally attached to the button

Screenshots
No event occurs when the button is clicked.
When option 2 is clicked, a click event is unintentionally triggered and a log is recorded.

• When clicking button
  https://github.com/user-attachments/assets/72ae348d-b811-411e-b0db-84df3c4e0b5d

Environment:

• Dioxus version: 0.6.0-alpha.3
• Rust version: 1.81.0
• OS info: Ubuntu 22.04
• App platform: web, fullstack

Questionnaire
That part is part of my code.

#![allow(non_snake_case)]

use dioxus::prelude::*;
use dioxus_logger::tracing;

#[derive(Clone, Routable, Debug, PartialEq, serde::Serialize, serde::Deserialize)]
enum Route {
    #[route("/")]
    Home {},
}

#![allow(non_snake_case)]

use dioxus::prelude::*;
use dioxus_logger::tracing;

#[derive(Clone, Routable, Debug, PartialEq, serde::Serialize, serde::Deserialize)]
enum Route {
    #[route("/")]
    Home {},
}

fn main() {
    // Init logger
    dioxus_logger::init(tracing::Level::INFO).expect("failed to init logger");
    tracing::info!("starting app");
    launch(App);
}

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

#[component]
fn Home() -> Element {
    let mut count: Signal<i32> = use_signal(|| 2);
    let mut show_list: Signal<bool> = use_signal(|| true);
    rsx! {
        div {
            if !show_list() {
                button {
                    onclick: move |_| {
                        show_list.set(true);
                    },
                    "Show List"
                }
            } else {
                div {
                    button {
                        onclick: move |_| {
                            show_list.set(false);
                        },
                        "Hide List"
                    }
                }
                div {
                    for i in 0..count() {
                        div {
                            id: "LIST_{i}",
                            key: "LIST_{i}",
                            style: "width: 200px; background-color:green; margin-bottom: 10px; text-align:center; color:white; padding: 10px 0px;",
                            onclick: move |_| {
                                tracing::info!("LIST {} clicked", i);
                            },
                            "LIST NUM {i}"
                        }
                    }
                    div {
                        id: "ADD_LIST",
                        key: "ADD_LIST",
                        style: "width: 200px; background-color:blue; margin-bottom: 10px; text-align:center; color:white; padding: 10px 0px;",
                        onclick: move |_| {
                            tracing::info!("ADD LIST");
                            count += 1;
                        },
                        "ADD LIST"
                    }
                }
            }
        }
    }

If I try to render that function as a conditional statement, and use a for loop to create the element and add a button below that part, the onclick event doesn't work properly.
It looks like the onclick event is not attached to the button, but to the second element in the for loop.

Wrapping the entire for loop in a div or removing the conditional seemed to work fine.
I'm raising this as an issue ticket because I'm curious as to whether that part was intentional.

[chungwong]

Maybe the same issue as #3094

[victor138128]

@chungwong
Ok, I will check it. thank you!

[RustGrow]

Take a close look at the code. You use this part twice

#![allow(non_snake_case)]

use dioxus::prelude::*;
use dioxus_logger::tracing;

#[derive(Clone, Routable, Debug, PartialEq, serde::Serialize, serde::Deserialize)]
enum Route {
    #[route("/")]
    Home {},
}

#![allow(non_snake_case)]

use dioxus::prelude::*;
use dioxus_logger::tracing;

#[derive(Clone, Routable, Debug, PartialEq, serde::Serialize, serde::Deserialize)]
enum Route {
    #[route("/")]
    Home {},
}

It works fine for me
dx --version
dioxus 0.6.0-alpha.3 (ef436e4)

Dioxus.toml

[dependencies]
dioxus = { git = "https://github.com/DioxusLabs/dioxus", features = ["router"] }
dioxus-logger = "0.5.1"
serde = { version = "1.0.213", features = ["derive"] }

[features]
web = ["dioxus/web"]

Code

#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_logger::tracing;

#[derive(Clone, Routable, Debug, PartialEq, serde::Serialize, serde::Deserialize)]
enum Route {
    #[route("/")]
    Home {},
}

fn main() {
    // Init logger
    dioxus_logger::init(tracing::Level::INFO).expect("failed to init logger");
    tracing::info!("starting app");
    launch(App);
}

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

#[component]
fn Home() -> Element {
    let mut count: Signal<i32> = use_signal(|| 2);
    let mut show_list: Signal<bool> = use_signal(|| true);
    rsx! {
        div {
            if !show_list() {
                button {
                    onclick: move |_| {
                        show_list.set(true);
                    },
                    "Show List"
                }
            } else {
                div {
                    button {
                        onclick: move |_| {
                            show_list.set(false);
                        },
                        "Hide List"
                    }
                }
                div {
                    for i in 0..count() {
                        div {
                            id: "LIST_{i}",
                            key: "LIST_{i}",
                            style: "width: 200px; background-color:green; margin-bottom: 10px; text-align:center; color:white; padding: 10px 0px;",
                            onclick: move |_| {
                                tracing::info!("LIST {} clicked", i);
                            },
                            "LIST NUM {i}"
                        }
                    }
                    div {
                        id: "ADD_LIST",
                        key: "ADD_LIST",
                        style: "width: 200px; background-color:blue; margin-bottom: 10px; text-align:center; color:white; padding: 10px 0px;",
                        onclick: move |_| {
                            tracing::info!("ADD LIST");
                            count += 1;
                        },
                        "ADD LIST"
                    }
                }
            }
        }
    }
}

bandicam.2024-10-25.20-44-17-867.mp4