Form storage not working in routable panel?

Questions
1

I have a routable panel define in router.js as such:

{
    path: '/panel/left/',
    panel: {
      component: PanelLeft,
    }
  },

The contents of the template for this panel is:

<template>
    <div class="panel panel-left panel-cover theme-dark">
       <div class="page" data-name="test">
         <div class="navbar">
           <div class="navbar-bg"></div>
           <div class="navbar-inner sliding">
             <div class="title">TEST</div>
           </div>
         </div>
         <div class="page-content">
           <form class="list form-store-data" id="my-form">
           .... (= the example form from the docs page)

The main page (app.f7.html) is defined as:

 <template>
   <div id="app">
     <!-- Statusbar -->
    <div class="statusbar"></div>
 
     <!-- Main view -->
     <div class="view view-main view-init" id="view-main" data-url="/"></div>
 
   </div>
 </template>

The panel opens correctly, but data is not saved into the local storage. If I place all code into the main page it works, so it’s definitely related to use of routable panel. Any idea how I can get this to work?

2

I found the problem. In form.js the form storage isn’t initialised when a panel opens. The pageInit event isn’t triggered for routable panels when the panel opens. Instead I added this code to the ‘on’ property and now it works.

In forms.js at line 309 add this code:

panelOpen: function panelOpen(panel) {
  var app = this;
  panel.$el.find('.form-store-data').each((index, formEl) => {
    app.form.storage.init(formEl);
  });
},
panelClose: function panelOpen(panel) {
  var app = this;
  panel.$el.find('.form-store-data').each((index, formEl) => {
    app.form.storage.destroy(formEl);
  });
}

Github is down atm, so can’t create a patch. But maybe this can be patched into the next release.