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

Some events doesn't work since listener multiplexer update #2061

Closed
Tracked by #2052
KarlitosVII opened this issue Sep 17, 2021 · 0 comments · Fixed by #2062
Closed
Tracked by #2052

Some events doesn't work since listener multiplexer update #2061

KarlitosVII opened this issue Sep 17, 2021 · 0 comments · Fixed by #2062
Labels

Comments

@KarlitosVII
Copy link
Contributor

KarlitosVII commented Sep 17, 2021

Problem
Hello,
I didn't test all events so some may also be bugged, but since 68d2fdb onblur and onscroll doesn't works. onfocusout can be used in place of onblur but there is no equivalent for the onscroll event.

Steps To Reproduce

use gloo::console;
use yew::prelude::*;

pub struct Model;

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

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

    fn view(&self, ctx: &Context<Self>) -> Html {
        let onblur = ctx.link().callback(|_| {
            console::log!("Blur"); // Doesn't works
        });
        let onfocusout = ctx.link().callback(|_| {
            console::log!("Focus out"); // Works
        });
        let onscroll = ctx.link().callback(|_| {
            console::log!("Scroll"); // Doesn't works
        });
        html! {
            <>
                <button {onblur} {onfocusout}>{"Click me then click outside"}</button>
                <div style="height: 500px; overflow-y:auto" {onscroll}>
                    <div style="height: 1000px">{"Scroll me"}</div>
                </div>
            </>
        }
    }
}

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

Environment:

  • Yew version: master
  • Rust version: 1.54.0
  • Browser: tested on latest Firefox and Edge

Cheers.

mc1098 pushed a commit to mc1098/yew that referenced this issue Sep 18, 2021
Adds a failing test to identify the issue raised in yewstack#2061
siku2 pushed a commit that referenced this issue Sep 18, 2021
* Add failing test for non bubbling events

Adds a failing test to identify the issue raised in #2061

* Fix handling events in capture phase

The global mutltiplex registers an event listeners on the body element
and then we do the event bubbling manually in Yew, however, because we
were still registering event listeners to run on the bubbling phase
events that do not bubble (like blur) never reach the body element.
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.

1 participant