Ionic-framework: Tab Navigation Back Button

[syn6UK]

Ionic version:


[x] 4.x

I'm submitting a ...

[X] bug report
[ ] feature request

Current behavior:
Back button has no animation when linking to a page with tabs

Expected behavior:
Back button should take you back with animation.

Steps to reproduce:
Created a page called main
Created another page added in tabs and a separate router for the tabs
Linked to the tabs page from main page.
Clicking back doesn't work unless you add defaulthref, and when you do, it doesn't have the backwards animation.

Related code:

tabs-page.html

`



Analysis

<ion-tab-button tab="summary">
  <ion-icon name="today"></ion-icon>
  <ion-label>Summary</ion-label>
</ion-tab-button>

<ion-tab-button tab="webview">
  <ion-icon name="desktop"></ion-icon>
  <ion-label>Web View</ion-label>
</ion-tab-button>

`

Tabs router

`import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
{
path: '',
component: TabsPage,
children: [
{
path: 'analysis',
children: [
{
path: '',
loadChildren: '../analysis/analysis.module#AnalysisPageModule'
}
]
},
{
path: 'summary',
children: [
{
path: '',
loadChildren: '../single-story/single-story.module#SingleStoryPageModule'
}
]
},
{
path: 'webview',
children: [
{
path: '',
loadChildren: '../webview/webview.module#WebviewPageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/summary',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/summary',
pathMatch: 'full'
}
];

@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
`

Main Router

`import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
{ path: '', loadChildren: './today/today.module#TodayPageModule' },
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
`

A sample application via GitHub

StackBlitz (https://stackblitz.com)

Plunker (http://plnkr.co/edit/cpeRJs?p=preview)

-->

insert short code snippets here

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 7 other plugins)

System:

   ios-deploy : 1.9.4
   NodeJS     : v11.1.0 (/usr/local/bin/node)
   npm        : 6.5.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

[liamdebeasi]

Hi there,

Thanks for opening an issue with us! Would you be able to provide a repository with the code required to reproduce this issue? Thanks!

[petrot]

I have exactly the same problem. But in my app, I have dynamic defaultHref params because I can navigate to the tabbed detail page from various root pages.

[petrot]

Any news?

[liamdebeasi]

Hi there,

I need a repository with the code required to reproduce this issue as I am not seeing this problem on my end.

Thanks!

[petrot]

@liamdebeasi here is a sample project:
https://github.com/petrot/ionic-tab-navigation-bug

When you run it, please read the tab page contents: I wrote comments to the pages.

I think this sample project fits to the original issue.

[petrot]

Guys, any news?

[liamdebeasi]

Hi there,

Apologies for the delay in response. I took a look at your repo and have been able to reproduce this issue. I will post an update here when the issue has been resolved.

Thanks!

[petrot]

@liamdebeasi thanks!

[petrot]

Hi guys, maybe any news? :)

[petrot]

@liamdebeasi is there any update on this issue?

[petrot]

ping

[petrot]

@liamdebeasi My repo has been updated to use Ionic 5. The problem still exists :/

https://github.com/petrot/ionic-tab-navigation-bug

[petrot]

@liamdebeasi I think you could close this issue. Ionic 5.1 solves this problem. defaultHref is necessary for the nested tabs, but the animation works.

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