I almost found a solution (I use it in my app.vue
, in mounted()
event)
// Clicking again a tab already selected move it back to first page
const $ = this.$$;
const app = this.$f7;
let lastTab = $('#framework7-root > .views > .toolbar .tab-link.tab-link-active').attr('data-tab');
$(document).on('click', '#framework7-root > .views > .toolbar .tab-link.tab-link-active', function () {
const currentTab = $(this).attr('data-tab');
if (currentTab === lastTab) {
const $viewEl = $(currentTab);
const view = app.views.get($viewEl);
if (view.history.length > 1) {
view.router.back(view.history[0], {
force: true,
});
}
}
lastTab = currentTab;
});
It works well, except for a tab with a list-index.
If I go to this tab, then select a page in the list, then go back to the list by clicking again the already selected tab, then move to another tab, then move back to this tab, I have an error in the console and the index list does not scroll auto scroll when using the index (index labels still appear correctly though):
list-index-class.js:351 Uncaught TypeError: Cannot read property 'offsetHeight' of undefined
at ListIndex.calcSize (list-index-class.js:351)
at HTMLDivElement.handleResize (list-index-class.js:133)
at HTMLDivElement.handleEvent (dom7.module.js:407)
at Dom7.trigger (dom7.module.js:569)
at Framework7.show (tabs.js:145)
at Framework7.tabLinkClick (tabs.js:264)
at eval (clicks.js:42)
at Array.forEach (<anonymous>)
at eval (clicks.js:38)
at Array.forEach (<anonymous>)
EDIT : I partially reproduced my issue!
https://jsfiddle.net/s69kmjwr/1/
- Go to tab B
- Navigate as deep as you want with the links
- Click tab B again: you move back to page B in tab B
- Go to tab A
- Go back to tab B
Look into the console: the error shared below appears.
Note that on my real app, in addition to the error appearing in the console, the “auto scroll” when swiping over the index stops working. But I tested to replace my dynamic datas by static datas, and I then observe the same result than the jsfiddle: everything seems to work, except for the error in the console.
EDIT : I found a solution ; it’s auto init that was failing.
https://jsfiddle.net/f1c4kq7L/
Strange enough, I discovered that the bug was not affecting iOS… so it’s perhaps something specific to Chrome, but I do not know exactly what. Anyway, now, it works. There is perhaps something that should be corrected inside Framework7, so I will open a bug ticket, just in case.