Current behavior:
The root page of ny app is a log in page where you can either chose to log in whit email/password or facebock via firebase.
When you are authenticated, the TabsPage is pushed like this:
firebase.auth().onAuthStateChanged((user)=>{
if(user) {
this.navCtrl.push(TabsPage);
}
});
tabs.html
<ion-tabs #mainTabs>
<ion-tab [root]="tab1Root" tabTitle="title1" tabIcon="any-logo" ></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="title2" tabIcon="any-logo"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="title3" tabIcon="any-logo"></ion-tab>
</ion-tabs>
tabs.ts
import { Component, ViewChild } from '@angular/core';
import { Tabs } from "ionic-angular"
import { FirstPage } from '../first/first';
import { SecondPage } from '../second/second';
import { ThirdPage } from '../third/third';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root: any = FirstPage;
tab2Root: any = SecondPage;
tab3Root: any = ThirdPage;
@ViewChild('mainTabs') mainTabs: Tabs;
constructor() {}
ionViewDidEnter() {
//..
}
}
… and everything seems OK. The navigation is perfect, but… The tabs can only be highligted/active/selected the first time they are selected. The second time you click on the tab, navigating from another tab, the tab that is clicked stays unselected.
Other information:
When i check the DOM-elements while navigating i around i can see that “aria-selected”-property of the <a class"tab-button">
-element (the tab) is unchanged. But when i manually change the value, true or false, the tab selected becomes selected accordingly.
The problem disappears if any other page is pushed before the tabPage:
this.navCtrl.push(OtherPage); // push other page here
this.navCtrl.push(TabsPage);
I did accutually mange to work around this problem by loading the TabsPage in the constructor of the OtherPage. But thats so ugly.
Am I doing anything wrong or is this a built in bug?