When using the new app root component with tabbed views, the tab-link-highlight element (selected tab border top line) is missing. After switching to another tab, the line appears and works correctly. If I put the tabbed layout right inside the html, without using the root component, everything works as expected.
This is my code, exactly the same code works correctly when used directly in index.html:
Just discovered something that might be related. If the root app component contains a single view with class view-init, it is initialized correctly on app init. But when I use for example this code to switch login status:
f7app.rootComponent.$setState({
login: false
}
the view is added in source, but is not auto initialized. Only happens when tabbed view is used in either state (login true/false), if both situations contain a single view everything is fine. It looks like not all default ‘handlers’ are called after rootComponent.$setState.
Complete root component:
I now added an id attribute to the login view: id="view_login" and suddenly switching the views works without any problems. I remember that somewhere in the documentation is mentioned that for VDOM to work properly on lists, each item should have a unique key or id attribute.
@nolimits4web Maybe add this as a suggestion to https://framework7.io/docs/router-component.html#main-app-component , to always add a unique id to views when used in components. Might be required only when a tabbed view is used in a component, but it seems a good practise to me to always add an id to views/view containers.
Still can’t solve my first issue, with the missing active tab line.
Thanks for noting that issue. Already added info to docs about recommendation to add ID or KEY on views. And pushed fix to repo for that issue with Tabbar, so will be fixed in next update
I have also issue with the tab-link-highlight. It is working on safari mac. But when I view it on safari iphone the highlight dissapear. Will this also be fixed for the next update?
@nolimits4web Great new updates! I noticed this in the changelog for version 5.3.2
But I’m still missing the line element on app init. Do I have to make a change to my tabbar layout or classes? I’ve tried adding an ID to all elements, but without luck. If you click on another tab the active line element suddenly appears and works without any issues.
Currently my app layout looks like this. The tabbar works OK when outside an {{if}} block, so I think it has something to do with VDOM.
Can you also give example of script where it fails, I mean in what order those context variables set so I can replicate it
I set init to true after the login status is checked and the user login status is known. This is done like this:
f7app = new Framework7({
...
on: {
init: function() {
// check login status and set app root state like this
this.rootComponent.$setState({
init: true,
login: true
});
}
}
...
});
First I thought it had something to do with Framework7 not yet initalized fully, but the active tab line also doesn’t appear if I $setState from console. The main views (#view-container and #view-login) toggle properly and all routes+tab views are loaded correctly. I currently workaround by manually switching the tabs, but I guess you still want to fix this. No hurries from my side 
I thinks it’s something like that the component auto initialization on root component level is done immediately after the $setState call, and not waiting for something like $tick.
Hmm, tried it and can’t replicate. So please try with just released 5.4.0 maybe it is fixed there. Otherwise maybe some minimal JSFiddle would be possible?
@nolimits4web Minimal jsfiddle using Framework7 5.3.2:
https://jsfiddle.net/gkds49tb/1/
If you ‘click to login’, the views and tabs appear and the active tab has highlight color, but is missing the top line. Once you click another tab, the line appears an animates correctly. If you move the tabbed views outside the {{#if}} block, it works completely OK.
Will try with 5.4.0 tomorrow.
Ok, you are just missing tabbar class on toolbar element, just add it and all works https://jsfiddle.net/mvyghbtj/ 
@nolimits4web Great, thank you! That fixes it indeed. Compared my code many times to the documentation the last few days, but I still haven’t noticed this difference… Also didn’t pay too much attention to that part, because it worked OK if I put it outside the {{#if}} blocks Thanks and have a nice weekend!