F7-svelte ListItem in Acordion problem modifying component's state in click handler

Consider following three simple pages, shown below (App.svelte, home.svelte, about.svelte). After clicking on an “About” menu in a left panel, the link “GoBack” in about.svelte, which is loaded into a #main view, dooes not work at all. However if I disable the line “curSelMenu = pos.id;” in ListItem click handler, everything works without any problems.

Can someone elighten me, what did I do wrongly ? Thank you very much in advance :slight_smile:


<App theme="auto" name="F7Test" id="F7Test" {...f7params}>
  <Panel left cover>
        <List accordionList>
          {#each menuTree as mnu, mnuIdx}
          <ListItem accordionItem title="{mnu.title}">
              {#each mnu.subItems as pos, posIdx}
              <List menuList>
                <ListItem panelClose
                  selected={curSelMenu === pos.id}
                  on:click={(e) => {
                    curSelMenu = pos.id;
                  <span slot="media">
                    <Icon md="{pos.icon}" aurora="{pos.icon}" ios="{pos.icon}" />

  <!-- Main view -->
  <View main id="main" url="/">
    <Navbar title="Application Title Bar ..."></Navbar>


  import {
    AccordionContent, App, Icon, List, ListItem, Navbar, Page, Panel, View
  } from 'framework7-svelte';

  import 'framework7-icons';

  import HomePage from './home.svelte';
  import AboutPage from './about.svelte';

  const f7params = {
    routes: [
      { path: '/',       component: HomePage,  },
      { path: '/about/', component: AboutPage, },

  const menuTree = [
      title    : 'MainMenu Item 1',
      content  : 'Item 1',
      icon     : 'mdi mdi-home',
      itemColor: 'blue',
      disabled : false,

      subItems: [
        { label: 'Home'  , id: 'home'  , icon: 'f7:house_fill'       , route: '/' }   ,
        { label: 'About' , id: 'about' , icon: 'f7:info_circle_fill' , route: '/about/' }   ,

  let curSelMenu = '';


<Page name="home">
    <Button panelOpen="left">Left Panel</Button>
  import { Button, Block, Page } from 'framework7-svelte';


<Page name="about">
    <Link onClick={() => f7router.back()}>GoBack</Link>
  import { Block, Page, Link  } from 'framework7-svelte';

  export let f7router;