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

Trigger doesn't work when provided as a context in a Transition #1948

Closed
tqwewe opened this issue Oct 25, 2023 · 1 comment
Closed

Trigger doesn't work when provided as a context in a Transition #1948

tqwewe opened this issue Oct 25, 2023 · 1 comment
Labels
bug Something isn't working

Comments

@tqwewe
Copy link
Contributor

tqwewe commented Oct 25, 2023

Describe the bug
Using a trigger provided as a context and used in a child which is nested in a Transition does not work.

Leptos Dependencies

leptos = { version = "0.5.1", features = ["nightly"] }
leptos_meta = { version = "0.5.1", features = ["nightly"] }
leptos_router = { version = "0.5.1", features = ["nightly"] }
leptos_dom = { version = "0.5.1", features = ["nightly"] }

To Reproduce

#[component]
fn App() -> impl IntoView {
    let trigger = create_trigger();
    provide_context(trigger);

    create_effect(move |_| {
        set_interval(move || trigger.notify(), Duration::from_millis(500));
    });

    // If this line is placed above the create_trigger then the bug disappears.
    let stuff = create_resource(|| (), |_| async move { do_something().await });

    view! {
        <Transition>
            {move || {
                stuff
                    .get()
                    .map(move |_| {
                        view! {<CountDisplay/> }
                    })
            }}

        </Transition>
    }
}

#[component]
fn CountDisplay() -> impl IntoView {
    let (count, set_count) = create_signal(0);

    let trigger: Trigger = expect_context();
    // Increment the count when the trigger triggers
    let _ = watch(
        move || trigger.track(),
        move |_, _, _| {
            set_count.update(|count| *count += 1);
        },
        false,
    );

    view! { <span>{count}</span> }
}

async fn do_something() {
    // This timeout is needed, otherwise the bug disappears...
    // AND it needs to be more than the time set for the interval above (500ms)
    TimeoutFuture::new(600).await; 
}

In this example, the count should increment every 500ms.
However, with this specific code it doesn't work. But if you change either:

  • Move the create_trigger below the create_resource
  • Set the TimeoutFuture to below the interval
    Then the bug disappears and the code works correctly.

Expected behavior
The code should work no matter if the Trigger or Resource is created first.

@gbj gbj added the bug Something isn't working label Nov 3, 2023
@gbj
Copy link
Collaborator

gbj commented Nov 3, 2023

This is kind of interesting. I wonder whether the example is both a little too complex for me to fully track what's going on, and to simple to reflect what's actually happening in an app.

The issue seems to be caused by <CounterUpdater/> running twice. Simply replacing

view! {
    <Transition>
        {move || {
            stuff
                .get()
                .map(move |_| {
                    view! {<CountDisplay/> }
                })
        }}
    </Transition>
}

with

view! {
    <Transition>
        <CountDisplay/>
    </Transition>
}

fixes the example. But I imagine such a simple fix is not available in the complete example.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants