App root component - Tabbed view / active tab

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

2 Likes

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?