Tabs disappear when setting root page in method in tabs.ts

[andreakpresley]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When setting the root page from a method inside of tabs.ts, the tabs disappear completely on app load.

Expected behavior:
The tabs do not disappear.

Steps to reproduce:

1. Have the following code in tabs.html
   <ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home" (ionSelect)="goHome()"></ion-tab>
</ion-tabs>

2. This method in tabs.ts
   goHome() {
this.navCtrl.setRoot(HomePage);
}

3. Run the app

Related code:
See above.

Other information:
I want to do this because I want the user to always go to the Home page when clicking on the 'Home' tab. I do not want it to go to any views that have been set as the root during the app's lifecycle, as it is currently doing. If I hit "Home" once it goes back to the last screen. Hitting "Home" again does take me back home, but I want to get there in one tap.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (C:\development\github\off-limits-2\off-limits-2\node_modules)

    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.6.0

System:

    Node : v6.11.0
    OS   : Windows 10
    npm  : 5.1.0

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a plunker or a simple demo application via a GitHub repo that demonstrates this issue?

Based on the description you have here, my guess as to what is going on is that class the following code exists in has an instance of the parent nav controller and not the nav controller for the individual tab:

goHome() {
  this.navCtrl.setRoot(HomePage);
}

If that code is in the TabsComponent then it makes sense that the tabs disappear since you are replacing the parent nav root, which had the tabs component, with the home component.

If that is the case, then this is not really an issue with the Ionic Framework itself but more of a "how do I do this?" sort of question. In that case, I urge you ask this question on our forum or on our slack channel. The Plunkr or GitHub repo will still be very useful in that case as well.

Thanks for using Ionic!

[SerdarNur]

Hey,

i had the same problem. I was navigation to the HomePage (first Tab) instead to TabsPage.

So you should change

goHome() {
  this.navCtrl.setRoot(TabsPage);
}

If your TabsPage looks like this:

export class TabsPage {

  tab1Root = HomePage;

  constructor() {

  }
}

[andreakpresley]

@SerdarN92 Thanks for the suggestion. I tried that and it does keep the tabs from disappearing, but now it locks me from navigating anywhere else.

[andreakpresley]

@kensodemann Here is a link to the branch I created to show the disappearing tabs: https://github.com/andreakpresley/off-limits-2/tree/disappearing-tabs. When you look in tabs.ts, you will see a line that is commented out that sets the root to the TabsPage. This causes the screen to freeze, so that may be a bug unless I am missing something. Thanks

[SerdarNur]

I´ve your code in front of me and there is no line that is commented out in tabs.ts @andreakpresley

[kensodemann]

@SerdarN92 - make sure you have the disappearing-tabs branch checked out and not master. That got me at first too... :)

[SerdarNur]

Oh okay one moment.

[kensodemann]

@andreakpresley - here is what is happening with the current code. Note that this code is in the TabsPage as you stated.

  forceHome() {
    //Uncomment this to see the tabs
    this.navCtrl.setRoot(HomePage);

    //Uncomment below to see the tabs, but freeze the screen from going anywhere
    // this.navCtrl.setRoot(TabsPage);
  }

Your application has several nav controllers. There is the nav controller instantiated in the application component, and then each tab has its own nav controller. Like this:

Application Controller (has nav)
  TabsPage
    Tab1 (has nav)
    Tab2 (has nav)
    etc...

The TabsPage exists within the application component, so when you inject the nav controller, the DI engine goes up the tree to find the closest nav controller. The closest one up the DOM tree is the one from the Application Controller.

The application controller sets the root of the parent nav controller to the TabsPage. It should probably stay that way for your application.

Also, when you enter your app and the TabsPage is instantiated, the home page is selected triggering the forceHome() method to be called.

If the first line in uncommented, you are changing the root for the application component's nav controller from TabsPage to HomePage. Thus the tabs go away.

If the second line is uncommented, you are changing the root of the application component's nav controller to be TabsPage, which selects HomePage as the active tab, which triggers the forceHome() method, which sets the application's controller to be TabsPage, which... (infinite loop)

I am closing this issue as it is not an issue with the framework itself. You can continue the conversation here, but you will likely get more traction on our forum or on our slack channel.

[SerdarNur]

@kensodemann is right. Your code makes at the point you call forceHome() no sense.

Remove that call from tabs.html and remove that method from tabs.ts.

[andreakpresley]

Thank you guys for such a thorough response. Sorry for not understanding. I will move this discussion to the forums. Thanks again for your time

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.