Panel backdrop stays open after panel is closed

Questions
1

Hello,

I have the following code for my navigation panel:

...
let panel;
let current_page = "home";

    onMount(() => {
        f7ready(() => {
            f7.on("routeChange", function (page) {
                current_page = page.name;
                console.log(1);
                panel.instance().close();
                console.log(2);
            });
            panel.instance().on("panelOpen", () => console.log("panelOpen"));
            panel.instance().on("panelClose", () => console.log("panelClose"));
            panel.instance().on("panelClosed", () => console.log("panelClosed"));
        });
    });
</script>

<Panel bind:this={panel} left>
    <List menuList>
        <ListItem selected={current_page === "home"} link="/" title="Startseite" />
        <ListItem selected={current_page === "current"} link="/current" title="Aktuell" />
...

The problem is, the panelClosed event is not fired, not when calling panel.instance().close() and not when the ListItems have the panelClose attribute.
The backdrop of the panel stays visible and no more user input is possible.
Is this a common problem and might this be solved?

Kind regards

2

The closing works if the panel.instance().close() method is delayed with a setTimeout function.

onMount(() => {
        f7ready(() => {
            f7.on("routeChange", function (page) {
                current_page = page.name;
                setTimeout(() => panel.instance().close(), 500);
            });
        });
    });

This works, but I guess this should not be the intended behavior.