Skip to content

ResizeEvent bubbles up in desktop #5258

@acheul

Description

@acheul

Problem

Resize Event is not supposed to bubble up, but it does in desktop target. (v0.7.3, Windows OS)
When both of parent and child element have resize event, parent's resize event receives not only one's resize data but also child's. This does not happen in web target.
We can prevent it by add a simple line event.stop_propagation(), but still it seems to be a bug.
It's related to a comment in #2293 (#2293 (comment))

Steps To Reproduce

Steps to reproduce the behavior:

  • An example:
#[component]
fn App() -> Element {

    let mut sizes = use_signal(|| Vec::<(f64, f64)>::new());
    let mut stop_propagation = use_signal(|| false);

    rsx! {
        div {
            width: "100%",
            height: "100vh",
            // Parent Element
            div {
                border: "1px solid blue",
                width: "50%",
                height: "50%",
                // Parent's onresize event receives Child's size too when child's resize event does not stop propagation.
                onresize: move |event: ResizeEvent| {
                    let size = event.get_border_box_size().unwrap();
                    let size = (size.width, size.height);
                    sizes.write().push(size);
                },
                // Child Element
                div {
                    border: "1px solid blue",
                    width: "50%",
                    height: "50%",
                    onresize: move |event: ResizeEvent| {
                        if stop_propagation() {
                            event.stop_propagation();
                        }
                    },
                }
            }
            div {
                button {
                    onclick: move |_| {
                        stop_propagation.toggle();
                    },
                    "stop_propagation: {stop_propagation()}"
                }
                button {
                    onclick: move |_| {
                        sizes.write().clear();
                    },
                    "Clear Sizes"
                }
            }
            div {
                div { "Sizes"}
                for (i, size) in sizes().into_iter().enumerate() {
                    div {
                        key: "{i}",
                        "size: {size:?}"
                    }
                }
            }
        }
    }
}
  • Then serve in desktop

Expected behavior

  • The parent element should receive only oneself's resize data, but the child's resize data bubbles up without stop_propagation.

Screenshots

  • Screenshots of the above example:
    1. Without stop_propagation on child: The parent receives not only one's size but also the child's.
Image
    1. With stop_propagation on child: Now the parent receives only oneself's size
Image

Environment:

  • Dioxus version: v0.7.3
  • Rust version: rustc 1.92.0, stable
  • OS info: Windows
  • App platform: desktop

Questionnaire

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions