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

Console error "closure invoked recursively or after being dropped" when executing navigate in a component using Indexed #659

Closed
ab-honda-ichigo opened this issue Mar 3, 2024 · 4 comments
Labels
C-bug Category: bug, something isn't working duplicate This issue or pull request already exists

Comments

@ab-honda-ichigo
Copy link

Describe the bug
When I run navigate, I get the error "Uncaught Error: closure invoked recursively or after being dropped" in the console.
This is reproduced in components using Indexed.

Oddly enough, this error always appears three times in the console, regardless of the number of Indexed items.

This can be avoided by providing an a element inside the li element and giving it the href attribute.
However, what I actually want to do is to implement an implementation that changes the destination according to the condition when the element is clicked, so I think it is necessary to use navigate.

To Reproduce
Below is the source code that this reproduces.

#[component]
pub async fn PopoverMenu<G: Html>() -> View<G>
{
    let items = create_signal(vec!["hoge", "fuga", "piyo"]);
    view!
    {
        ul
        {
            Indexed
            (
                iterable=*items,
                view=move |_|
                {
                    view!
                    {
                        li
                        (
                            on:click=move |_|
                            {
                                navigate("/");
                            },
                        )
                        {
                            "hoge"
                        }
                    }
                }
            )
        }
    }
}

Screenshots
Screenshot_20240303_165916

Environment

  • Sycamore: "0.9.0-beta.2"
  • Browser: Chrome (Version 120.0.6099.224 (Official Build) (64-bit))
  • OS: Linux (EndeavourOS, Kernel Version: 6.7.4-arch1-1)

Additional context
I found #433 as a similar issue.

@ichigo-dev
Copy link

Sorry, I'm the poster of this issue.
I posted with the wrong user, so I'll add a comment to receive a notification.

@lukechu10 lukechu10 added the C-bug Category: bug, something isn't working label Mar 6, 2024
@lukechu10
Copy link
Collaborator

lukechu10 commented Mar 6, 2024

The issue has something to do with the fact that the element is removed when the event handler is executed. When the element is removed, the event handler is dropped while it is running! It is indeed the same issue as #443 #433 but I think we can leave this open since it provides a good test case for it.

Edit: referenced wrong issue.

@lukechu10 lukechu10 added the duplicate This issue or pull request already exists label Mar 6, 2024
@ichigo-dev
Copy link

Thank you for your detailed explanation.
Sorry for the trivial point, but the related issue is #433, not #443.

@lukechu10
Copy link
Collaborator

I can't seem to reproduce this issue anymore in v0.9.0-beta.3. Here is the complete code listing that I used:

Details

use sycamore::prelude::*;
use sycamore_router::{navigate, HistoryIntegration, Route, Router};

#[component]
pub async fn PopoverMenu() -> View {
    let items = create_signal(vec!["hoge", "fuga", "piyo"]);
    view! {
        ul {
            Indexed(
                list=items,
                view=move |_| view! {
                    li(on:click=move |_| navigate("/")) {
                        "hoge"
                    }
                }
            )
        }
    }
}

#[derive(Debug, Clone, Copy, Route)]
enum AppRoutes {
    #[to("/")]
    Index,
    #[to("/about")]
    About,
    #[not_found]
    NotFound,
}

#[component]
fn App() -> View {
    view! {
        Router(
            integration=HistoryIntegration::new(),
            view=|route: ReadSignal<AppRoutes>| {
                view! {
                    (match route.get() {
                        AppRoutes::Index => view! { "index" },
                        AppRoutes::About => view! { "about" PopoverMenu() },
                        AppRoutes::NotFound => view! { "not found" },
                    })
                }
            },
        )
    }
}

fn main() {
    console_error_panic_hook::set_once();
    sycamore::render(App);
    console_log!("App mounted!");
}

If this issue is not fixed for you, please feel free to reopen this issue or create a new issue.

@lukechu10 lukechu10 closed this as not planned Won't fix, can't repro, duplicate, stale Sep 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C-bug Category: bug, something isn't working duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

3 participants