Routable panels within a routable tab (REACT)


#1

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!


#2

Could you please provide some minimal reproduction JSFiddle? You can start from forking this one https://jsfiddle.net/nolimits4web/vxb8oyke/