Tabs list top position is not calculated right when selecting a tab on some Lifecycle events on ionic 3.4.0


#1

Hello everyone!

There is a problem when tab selection is changed on ionViewDidLoad and ionViewWillEnter events. On Ionic 2.2.1 it were working right, but on 3.4.0 it’s not.

To be more precise, e.g. when you calling:

@ViewChild('customerSettingsTabs') customerSettingsTabs: Tabs;
public selectedTab: string;
ionViewWillEnter() {        
        this.selectedTab = this.navParams.get('selectedTab');

        if (this.selectedTab) {
            switch (this.selectedTab) {
                case 'credits':
                    this.customerSettingsTabs.select(1);
                    break;
            }
        }
    }

selection of the tab changes, but the header is hidden behind the tabs list, because the style attribute “top” is not calculated right. The resulted html for the tabs list is:

<div class="tabbar show-tabbar" role="tablist" style="top: 0px;">.......</div>

but it should be

<div class="tabbar show-tabbar" role="tablist" style="top: 60px;">.........</div>

After tapping another tab, the position re-calculates right.

Also, on ionViewDidEnter event it’s calculated right from the beginning. So, is this some kind of bug or these lifecycle events shouldn’t be used for preselection and presetting different options?

I also noticed that same problem may occur even on ionViewDidEnter event, if the tabbed page is the last page in the list of pages passed to navController.setPages() function. I’ve changed it to setRoot() and push(), seems to work right, but it’s not efficient at all.

Thank you.