bug: Back button disappears when navigating across tab subpages

[anagstef]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
If you try to navigate to a page/route that belongs to another tab and you have no default href for the ion-back-button, the back button does not appear. However, browser's back button works fine.

Expected behavior:
Back button should appear and navigate you to the page you were before.

Steps to reproduce:
I used the ionic conference app with some changes to reproduce this.

• Go to Speakers tab
• Click The Ionic Package under the Burt Bear
• It should show the back button
• Go to Schedule tab
• Click any list item
• It gets you to the same page but without the back button

Related code:

My ionic conference app repo:
https://github.com/anagstef/ionic-conference-app

The changes I made to it:
anagstef/ionic-conference-app@d88276c

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   ios-sim : 8.0.1
   NodeJS  : v10.15.3 (/Users/anagstef/.nvm/versions/node/v10.15.3/bin/node)
   npm     : 6.4.1
   OS      : macOS
   Xcode   : Xcode 10.2.1 Build version 10E1001

[Splinteer]

Same here. With defaultHref we loose the back animation

[masimplo]

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?

[anagstef]

@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!

[liamdebeasi]

Hey everyone,

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

Thanks!

[masimplo]

@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.

[toxaq]

I ended up creating a custom back button which simply calls this.ionRouterOutlet.parentOutlet.pop(). I'm not sure if this is suitable for your use case but the back button in child tabs disappears because this.ionRouterOutlet.canGoBack() is always false. However parentOutlet gets you the tab container page which canGoBack() is true for.

[masimplo]

@toxaq thanks for the workaround. Hopefully the team will fix this some time soon in the codebase so that workarounds for expected behaviour are not needed. For now I have modified the routing tree of our app so that we don't navigate across tab subpages, until this is resolved.

[yaozuwang]

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.

[yaozuwang]

tabs is a crucial part of app development, can we get this fixed asap. I know the Ionic team is extremely busy, but half a year with no solution on such an important part is not ideal.

[toxaq]

I hate to be cynical but it's clear with recent development efforts that Angular is no longer a priority. The focus is on Stencil and React to grow Ionic.

[liamdebeasi]

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 #18311 (comment) and chat with the team regarding this. I will post an update regarding a more permanent solution when I have it. Thanks!

[quincarter]

Bumping this issue -- @liamdebeasi can you provide any update on this? I am also experiencing this issue.

[quincarter]

Also i think there are related issues to this:
#16315

[masimplo]

Any update on this? Is there something we can do to help get this fixed?

[EmreAkkoc]

any plan to fix this ?

[another-novelty]

For anyone in the same spot as me, this is my very basic and very crude back button now:

/**
 * Displays a back button
 * @param hidden_pages The pages where the back button should not be displayed
 */
const BackButton: React.FC<{hidden_pages?: string[] }> = ({hidden_pages}) => {
    let history = useHistory();
    const location = useLocation();
    const [showBTN, setShowButton] = useState(hidden_pages && ! hidden_pages.includes(location.pathname));

    useEffect(() => {
        setShowButton(hidden_pages && ! hidden_pages.includes(location.pathname));
    }, [hidden_pages, location.pathname])

    return (showBTN && (
            <IonButton className="back-button" onClick={history.goBack}>
                <span className={"chevron left"}/> Back
            </IonButton>
        ))
        || null
        ;
};

Edit: Sorry, just noticed this is the bug report for angular. Still , for anyone who got here through google and uses react, it might be usefull.

[muuvmuuv]

Why has this been removed from the backlog? This really prevents us from using the back button and write some own logic, which shouldn't be necessary.

From what I can see is that isTabSwitch always returns true if the stackId differs, this is kind of weird because this is normal when navigating outside tabs pages or anything else outside a current route.

Here is a repro with latest ionic start Tabs example: https://github.com/muuvmuuv/ionic-tabs-routing-issue

Navigating between pages never shows the back button expect for sub-pages. Two things should work:

1. Navigating from /tabs/tab1 to /tabs/some should show back button to /tabs/tab1 or fallback to /tabs if no defaultHref is set (so always the more top-level navigation will be tried which reduces errors?)
2. Navigating from /tabs/some to /tabs/tab1/sub should show a back button to /tabs/some or to /tabs/tab1 if initial loaded and fallback like 1.

[liamdebeasi]

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!

[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.