Ionic-framework: bug: double tap a tab then go to a global page, back button missing and swipe back broken

[peterzhang41]

Bug Report

Ionic version:
[x] 4.11.5

Current behavior:
using Angular router.navigate(), double-tap a tab then go to a global page, back button missing and swipe back broken

Expected behavior:
back button still appears, and swipe back gesture still working

Steps to reproduce:

1.run it
2.tap twice the tab
3.click the global page button
4.check the back button

Related code:

A sample application via GitHub
https://github.com/peterzhang41/ionicDoubleTapTabIssue

Other information:
our team has to use NavController instead

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.6 (/home/zehui/.nvm/versions/node/v10.17.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.5
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.9 

System:

   Android SDK Tools : 26.1.1 (/home/zehui/Library/Android/Sdk)
   NodeJS            : v10.17.0 (/home/zehui/.nvm/versions/node/v10.17.0/bin/node)
   npm               : 6.13.0
   OS                : Linux 4.15

[wilk-polarny]

See: #19293 and #18455

[DavidStrausz]

I think this is the same issue as described here: #19455, you can find my workaround in the comments which works fine for me. Unfortunately the author already closed the issue.

[wilk-polarny]

@DavidStrausz , keep in mind that the old window stack system (with the nav controller) is deprecated and will likely be removed in a future version

[tofra]

I'm encountering the same issue. Double click on a tab will prevent the back button to display on the "next" page. :-(

[wilk-polarny]

Cannot reproduce anymore on 4.11.8 or newer. Can anyone confirm?
nvm, it's still there

[peterzhang41]

Cannot reproduce anymore on 4.11.8 or newer. Can anyone confirm?

@ionic/[email protected] still be able to replicate, and it seems to be even worse now as one tap can also reveal it. Lol

[rastafan]

I can confirm this is still an issue in 5.4.11. Tapping 2 or more times on a tab-button breaks back button on the next navigation. Any fix/workaround for this?

[wilk-polarny]

Yup, funny thing is that I cannot reproduce this using the Ionic Conference Starter, but with other apps. The only difference is in the way (angular) routing is set up. Haven't nailed it down yet, but something gets messed up when tapping a tab button while already being on the root page for the tab - on consecutive navigations within the tab, the previous component will be destroyed (ngOnDestroy called), and thus there is no back button available. we had to hard code back button hrefs because of that - still, the animation is messed up due to the routing issues.

@liamdebeasi , we experience this bug since 4.x - any chance someone might take a look at this?

[rastafan]

As stated in #19455 , setting this.navController.setDirection('forward'); before calling this.router.navigate(['some',path]); actually seems to solve the issue.
Should we use navController.navigateForward instead of router.navigate to navigate through the app, in order to avoid this problem?

[wilk-polarny]

At least since Ionic 4 you shouldn't use the navController at all and use Angular Routing (if you use Angular) - the old nav controller is deprecated

[wilk-polarny]

I guess this has something to do with the routing - together with componentless routes and redirects and/or the way navigation happens when tapping an already open tab with its root component being displayed. Lazy loaded routes and componentless modules seem to play a role here (with components being destroyed even though they shouldn't - breaking navigation) - I am able to work around this by moving some child routes into the tab routing module.
I'm currently investigating and trying to nail this down a bit more.

[liamdebeasi]

Hi everyone,

This looks to be the same issue as https://github.com/ionic-team/ionic/issues/21074. There is a dev build in https://github.com/ionic-team/ionic/issues/21074#issuecomment-616695624 if people are interested in testing a fix out (requires Ionic 5.0+).

Thanks!

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/21085, and a fix will be available in an upcoming release of Ionic Framework.

[tofra]

Is this also being ported to ionic 4?

[liamdebeasi]

This fix will not be ported to Ionic 4. Ionic 4 is only receiving critical security fixes moving forward.

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