Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Event propagation fails #867

Closed
1 of 3 tasks
bcorey opened this issue Mar 8, 2023 · 4 comments · Fixed by #878 or #1393
Closed
1 of 3 tasks

Event propagation fails #867

bcorey opened this issue Mar 8, 2023 · 4 comments · Fixed by #878 or #1393
Labels
bug Something isn't working core relating to the core implementation of the virtualdom
Milestone
0.5.0: Signals

Comments

@bcorey
Copy link

bcorey commented Mar 8, 2023 •
edited
Loading

Problem

Children with onpointerdown or onclick events block propagation of pointer events to their parent.

Steps To Reproduce

  1. make a parent div with two child divs.
  2. assign onpointermove and onpointerdown events to the parent that log when triggered.
  3. assign an onpointerdown or onclick event to only one of the children that logs when triggered.
  4. observe that mouse interaction with the event-free child triggers the parent's event logs as expected.
  5. observe that when the mouse is moved across the child with an onpointerdown event, the parent's onpointermove event is not logged.
  6. observe that when the mouse is clicked on the child with the onpointerdown event, the parent's onpointerdown event is not logged.

Expected behavior

moving the mouse across either child div should trigger the parent's onpointermove event log. Would be helpful in making draggable divs.

Environment:

  • Dioxus version: 3.2
  • Rust version: 1.67.1
  • OS info: WSL2 Ubuntu, running the app with Trunk.
  • App platform: web - 0.3.1

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

Main.rs

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

fn main() {
    wasm_logger::init(wasm_logger::Config::new(log::Level::Info));
    dioxus_web::launch(app);
}

fn app(cx: Scope) -> Element {
    cx.render(rsx!{
        div {
            style: "width: 300px; height: 300px; background-color: blue;",
            onpointermove: move |_| log::info!("pointer moving on container"),
            onpointerdown: move |_| log::info!("pointer down on container"),
            div {
                style: "margin: 10px; width: 100px; height: 100px; background-color: yellow;",
                "no onpointerdown or click event",
            },
            div {
                style: "margin: 10px; width: 100px; height: 100px; background-color: red;",
                onpointerdown: move |_| log::info!("pointer down on CHILD"),
                "onpointerdown event"
            },
        },
        p {
            "Children with onpointerdown or onclick events specified do not allow pointer events to propagate to their parent"
        },
        p {
            "view console for details"
        }
    })
}

index.html

<!DOCTYPE html>
<html lang="en">
    <head> 
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <title>Pointer Event Bug</title>
    </head>
    <body>
      <div id = "main">
       
      </div>
    </body>
</html>

Cargo.toml

[dependencies]
dioxus = "0.3.2"
dioxus-web = "0.3.1"

log = "0.4"
wasm-logger = "0.2.0"
@bcorey bcorey changed the title Children with pointer events block pointer event propagation Children with onpointerdown events block onpointermove event propagation Mar 8, 2023
@ealmloff ealmloff added bug Something isn't working core relating to the core implementation of the virtualdom labels Mar 12, 2023
@ealmloff ealmloff mentioned this issue Mar 12, 2023
Merged
@bcorey
Copy link
Author

bcorey commented Mar 13, 2023

I appreciate the work done on this so soon! Unfortunately the issue persists with custom components:

main.rs

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

fn main() {
    wasm_logger::init(wasm_logger::Config::new(log::Level::Info));
    dioxus_web::launch(app);
}

fn app(cx: Scope) -> Element {
    cx.render(rsx!{
        div {
            style: "width: 300px; height: 300px; background-color: blue;",
            onpointermove: move |_| log::info!("pointer moving on container"),
            onpointerdown: move |_| log::info!("pointer down on container"),
            DummyItem {},
            DummyItemNoEvent {},
        },
    })
}


#[inline_props]
fn DummyItem(cx: Scope) -> Element {
    cx.render(rsx!{
        div {
            style: "width: 200px; height: 80px; background-color: red;",
            onpointerdown: move |_| log::info!("green child ptr down"),
            "some content",
        }
    })
}

#[inline_props]
fn DummyItemNoEvent(cx: Scope) -> Element {
    cx.render(rsx!{
        div {
            style: "width: 200px; height: 80px; background-color: green;",
            "some content",
        }
    })
}

The red div does not propagate events to its parent. Was unsure if this merits a separate issue.

@bcorey
Copy link
Author

bcorey commented Mar 13, 2023

I want to clarify the issue is indeed resolved in the original posted example not involving components.

@ealmloff ealmloff reopened this Mar 13, 2023
@ealmloff ealmloff changed the title Children with onpointerdown events block onpointermove event propagation Event propagation fails Mar 19, 2023
@ealmloff
Copy link
Member

It appears the parent of a VNode is never set after it is mounted. When the event is received and checks the parent for the VNode, it is always always false which causes event bubbling to fail.

@ealmloff ealmloff mentioned this issue Apr 8, 2023
Closed
@marc2332
Copy link
Contributor

marc2332 commented Jul 2, 2023 •
edited
Loading

I was also able to reproduce this issue (it's the same issue I think ? )
image

Looks like bubbling only works with elements in the same Component

Code:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            height: "50%",
            width: "100%",
            onclick: |_| println!("clicked 1"),
            rect {
                height: "100%",
                width: "100%",
                background: "blue",
                onclick: |_| println!("clicked 2"),
            }
        }
        rect {
            height: "50%",
            width: "100%",
            onclick: |_| println!("clicked 3"),
            Test { }
        }
    )
}

#[allow(non_snake_case)]
fn Test(cx: Scope) -> Element {
    render!(
        rect {
            height: "100%",
            width: "100%",
            background: "red",
            onclick: |_| println!("clicked 4"),
        }
    )
}

@marc2332 marc2332 mentioned this issue Jul 2, 2023
Closed
@ealmloff ealmloff added this to the 0.5 Release milestone Aug 10, 2023
@ealmloff ealmloff mentioned this issue Aug 23, 2023
Merged
1 task
@marc2332 marc2332 mentioned this issue Nov 19, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working core relating to the core implementation of the virtualdom
Projects
None yet
Milestone
0.5.0: Signals
3 participants
@bcorey @marc2332 @ealmloff