Hey everyone,

Apologies for the delay. I was able to reproduce this issue, and we will investigate further.

Thanks!

Hi everyone,

Just wanted to chime in here briefly. Most Ionic developers are using Ionic Angular, so Angular is still a huge priority for us. The focus recently has been on React mainly because it just entered 1.0, so we’ve been supporting it with higher priority fixes. Additionally, Stencil is handled by a separate team and does not impact development of Ionic Framework.

I will take a closer look at the code posted in https://github.com/ionic-team/ionic/issues/18311#issuecomment-499432089 and chat with the team regarding this. I will post an update regarding a more permanent solution when I have it. Thanks!

@liamdebeasi I tried debugging the compiled source code while running our app and came upon the following finding.

When I trying to navigate from tab3 to a subpage of tab1 (i.e. navCtrl.navigateForward('/tabs/tab1/subpage')) because of the tab change, the navigation is set from forward to back and the setBack method of stack-utils is called.

// Line 59 stack-controller.ts
  setActive(enteringView: RouteView): Promise<StackEvent> {
    let { direction, animation } = this.navCtrl.consumeTransition();
    const leavingView = this.activeView;
    const tabSwitch = isTabSwitch(enteringView, leavingView);
    if (tabSwitch) {
      direction = 'back';
      animation = undefined;
    }

// Line 32 stack-utils.ts
function setBack(views: RouteView[], view: RouteView) {
  const index = views.indexOf(view);
  if (index >= 0) {
    return views.filter(v => v.stackId !== view.stackId || v.id <= view.id);
  } else {
    return setRoot(views, view);
  }
}

the new view in not found in the existing views so index is negative and the else clause is triggered, thus converting the navigation to a setRoot, which explains the behavior we are witnessing in our apps.

I am not sure why you need to change the navigation to back in the first place, but it seems it requires a more cautious handling.

BTW I just tried commenting out line 59 of stack-controller.ts that sets the navigation to back and it works as expected, so I am pretty sure this is the culprit.

Thanks for the issue and apologies for the delay.

After discussion with the team, I can confirm that the behavior noted in the original post is the correct behavior.

In this scenario, the application is trying to manipulate the Tab 2 stack from within Tab 1.

Each tab is designed to be an individual navigation stack. Items in one stack should never interact with items in another stack. As a result, the usage described in this issue is considered an anti pattern in both Ionic and native mobile application and is not supported.

The iOS App Store app is a great example of correct tabs usage. If you start on the “Today” tab, none of the buttons in that tab will ever redirect you to the “Games” tab or the “Apps” tab. The only way to access either of those tabs is to tap the associated button in the tab bar.

The Ionic Kitchen Sink really should not be trying to route users across tabs. We will need to update the application to correct this behavior.

The team has plans to release improved routing documentation. The goal here is to better explain how to get the most out of routing in Ionic and how to correctly use routing patterns such as tabs. This work is being tracked internally, and we hope to have more to share soon.

I am going to close the desired behavior is not something we plan on supporting. For any other issues, please open a new thread. Thank you!

@manucorporat @brandyscarney hey peeps are you aware of this issue? This is a major blocker in developing any non trivial app with tabs using Ionic currently as there is no way to navigate successfully across the app. Can you please take a look and let me know if this is something that is fixable with the current design?

Thanks!

Also it seems that the underlying tab page of the tab you are navigating to is destroyed as soon as you are presented with the page of the other tab. Say I am in tab 3 (/main/tabs/tab3) and I click on a link that goes to a child of tab 1 (/main/tabs/tab1/subpage), tab 1 component is destroyed and subpage component does not have a back button.

@liamdebeasi I know you’ve done some work with the outlets, are you aware of this issue, as it is a pretty serious blocker in creating a functional app with tabs right now?

Same here. With defaultHref we loose the back animation

Yea same problem, still no fix. It’s either the back button is completely missing or there is no animation when you add defaultHref or a custom back button.