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.

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

No way to stop event bubbling per callback #2130

Closed
1 of 3 tasks
voidpumpkin opened this issue Nov 4, 2021 · 1 comment · Fixed by #2172
Closed
1 of 3 tasks

No way to stop event bubbling per callback #2130

voidpumpkin opened this issue Nov 4, 2021 · 1 comment · Fixed by #2172
Labels

Comments

@voidpumpkin
Copy link
Member

voidpumpkin commented Nov 4, 2021

Problem
So this issue was kind of raised in #2044 but the solution ended up being just keep event bubbling disabled or enabled globally and no other option.
Why there is no way to keep event bubbling enabled globally and be able to stop bubbling only on certain callbacks?

minimal testing code:

use yew::prelude::*;

struct Model;

impl Component for Model {
    type Message = ();
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Self
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        false
    }


    fn view(&self, ctx: &Context<Self>) -> Html {

        let parent_onclick = ctx.link().callback(|_|{
            gloo_console::info!("Parent callback!");
        });

        let child_onclick = ctx.link().callback(|e: MouseEvent|{
            gloo_console::info!("Child callback!");
            e.stop_propagation(); // Will not work
        });

        html! {
        <div style="height: 80px; width:80px; background-color: blue;" onclick={parent_onclick}>
            <div style="height: 40px; width:40px; background-color: green;" onclick={child_onclick}/>
        </div>
        }
    }
}

fn main() {
    yew::start_app::<Model>();
}

Solution
So as I understand from this comment #1542 (comment)
There was supposed to be a wrapper for Event that would enable stopping the bubbling, was this just forgotten or not implemented for a reason?

Environment:

  • Yew version: [ master]

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
@voidpumpkin voidpumpkin added the bug label Nov 4, 2021
@mc1098
Copy link
Contributor

mc1098 commented Nov 13, 2021

So in #2044 I mentioned about using Event::cancel_bubble and referenced the WHATWG standard:
"The cancelBubble getter steps are to return true if this’s stop propagation flag is set; otherwise false."
So we could check this as we are manually bubbling up. This does mean we have to keep jumping over to JS land to
stop bubbling and to check if it has been stopped on each loop iteration.
Note: that MDN does have a deprecated warning on cancelBubble but it seems to be regarding the use of it to stop propagation.

If we had Event wrappers then we could keep it all local to wasm. I think Event wrappers weren't forgotten it is just quite a bit of work as you need to wrap all the event types :)
It might be worth considering this issue from gloo and my failed custom event support PR for some inspiration if going the Event wrapper route (which I think is the end goal).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants