Hi,
thanks for the great framework! for performance reasons I moved my most important routable views to routable tabs. Ever since this change, whenever one of the views inside a tab routes to a panel, the app crashes with the following error:
TypeError: $newTabEl[0] is undefined[Weitere Informationen] tab.js:103
tabLoad tab.js:103
init router-class.js:1062
each dom7.module.js:603
init router-class.js:1016
init view-class.js:171
View view-class.js:91
create view.js:100
componentDidMount view.js:150
ready f7.js:26
f7ready plugin.js:40
componentDidMount view.js:142
commitLifeCycles13React
dispatchAction (index):1075
ControlTuningPanel ControlTuning.tsx:49
This is my F7 params object being passed to the App object:
const f7params: Framework7Params = {
name: 'GCU-1 UI',
id: 'com.dpgimbals.gcu.webui',
theme: 'md',
material: true,
animatePages: false,
materialRipple: false,
touch: {
fastClicks: true // Toradex requires this for overswipe to work https://github.com/framework7io/framework7/issues/2986
},
// @ts-ignore
routes: [
// before move to TABS:
// { path: '/gcui/', component: InitView },
// { path: '/gcui/main', component: LevelButtonsView },
// { path: '/gcui/profiles', component: ProfileView },
// { path: '/gcui/browse-settings', async: lazyLoadPage },
{
// move to TABS
path: '/gcui/',
component: ModesView,
tabs: [
{
// Tab path
path: '/',
// Tab id
id: 'Init',
},
{
path: '/main',
id: 'Levels',
},
{
path: '/profiles',
id: 'Config'
},
{
path: '/browse-settings',
id: 'Setup'
}
],
},
{ path: '/gcui/calibration', async: lazyLoadPage },
// don't use cache for panels - cannot reuse them!
{
path: '/gcui/setting-details/:settingKey',
async(to, from, resolve) { import(/* webpackChunkName: "panels" */ '../components/SettingDetails').then(c => resolve({ panel: { component: c.SettingDetailsPanel } })); }
},
{
path: '/gcui/choose-profile/:type',
async(to, from, resolve) { import(/* webpackChunkName: "panels" */ './panels/ProfileChooser').then(c => resolve({ panel: { component: c.ProfileChooserPanel } })); }
},
{
path: '/gcui/choose-device/:type',
async(to, from, resolve) { import(/* webpackChunkName: "panels" */ './panels/DeviceChooser').then(c => resolve({ panel: { component: c.DeviceChooserPanel } })); }
},
{
path: '/gcui/control-assignment/:controlId/:level',
async(to, from, resolve) { import(/* webpackChunkName: "panels" */ './panels/Assignment').then(c => resolve({ panel: { component: c.ControlAssignmentPanel } })); }
},
{
path: '/gcui/control-tuning/:controlId',
async(to, from, resolve) { import(/* webpackChunkName: "panels" */ './panels/ControlTuning').then(c => resolve({ panel: { component: c.ControlTuningPanel } })); }
},
{
path: '/gcui/edit-setting/:settingKey',
async(to, from, resolve) { import(/* webpackChunkName: "panels" */ './panels/EditSetting').then(c => resolve({ panel: { component: c.EditSettingPanel } })); }
},
{
path: '/gcui/show-notif/:guid',
async(to, from, resolve) { import(/* webpackChunkName: "popups" */ './panels/NotificationPopup').then(c => resolve({ popup: { component: c.NotificationPopup } })); }
},
{
path: '/gcui/notifications',
async(to, from, resolve) { import(/* webpackChunkName: "popups" */ './panels/NotificationsList').then(c => resolve({ popup: { component: c.NotificationsPopup } })); }
}
]
};
Any info would be greatly apprechiated!