Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Back links / closing smart selects fires page events for grandparent page

See original GitHub issue

This is a (multiple allowed):

bug
enhancement
feature-discussion (RFC)
Framework7 Version: 1.6.0
Platform and Target: Chrome, Phonegap
Live Link or JSFiddle/Codepen: Unable to demonstrate in Codepen or jsFiddle due to requirement for external html

EDIT: Tried to recreate the issue using inline pages, but the result is different. https://jsfiddle.net/weaponx86/L0rto7ps/

What you did

Modified template7-pages example to have 3 pages. -index (In DOM): Links to level1.html -level1.html: Links to level2.html -level2.html: Links back using class=“back”

Modified my-app.js:

// Let's register Template7 helper so we can pass json string in links
Template7.registerHelper('json_stringify', function (context) {
    return JSON.stringify(context);
});

// Initialize your app
var myApp = new Framework7({

    // Enabled pages rendering using Template7
    template7Pages: true,

	// Navigation / Router
	preprocess: preprocess, // This callback function allows you to modify loaded router (mostly Ajax) content right before it will be injected to DOM.	
	
	// Push State
	pushState: true, // Enable hash navigation
	pushStateNoAnimation: true,
});

// Export selectors engine
var $$ = Dom7;

// Add main View
var mainView = myApp.addView('.view-main', {

});

function preprocess(content, sUrl, next) {
	console.log('preprocess: ' + sUrl);
	next(content);
}
// executed when Framework7 just inserts new page (with "pageName" data-page attribute) to DOM
myApp.onPageBeforeInit('*', function (page) {
	var sMsg = 'onPageBeforeInit - page: ' + page.name;
	
	if (page.fromPage){
		sMsg += ' fromPage: ' + page.fromPage.name;
	}
	console.log(sMsg);
});

// executed after page (with "pageName" data-page attribute) animation
myApp.onPageAfterAnimation('*', function (page) {
	console.log('onPageAfterAnimation - page: ' + page.name);
});

Expected Behavior

When clicking back from level2.html the output should be:

Console output: onPageAfterAnimation - page: level1 preprocess: index1.html onPageBeforeInit - page: level1 fromPage: level2

Level 1 page shows

Actual Behavior

Console output: onPageAfterAnimation - page: level1 preprocess: file:///C:/Framework7-1.6.0/Framework7-1.6.0/examples/template7-pages/index.html onPageBeforeInit - page: index fromPage: level1

Level 1 page shows

This is causing major headaches for me since the index page preprocess is loading hundreds of rows from a SQLite database and building the template object in the background.