Ionic-framework: 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:
https://github.com/anagstef/ionic-conference-app/commit/d88276c6cf746d378727c634e210a28ce461d7a1

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

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