Ionic-framework: Ionic V4.beta11 ion-back-button changes tabs

[gfitas]

Bug Report

Ionic Info

ionic (Ionic CLI)          : 4.1.2  (/usr/local/lib/node_modules/ionic)
Ionic Framework            : @ionic/angular 4.0.0-beta.8
@angular-devkit/core       : 0.7.5
@angular-devkit/schematics : 0.7.5
@angular/cli               : 6.1.5
@ionic/ng-toolkit          : 1.0.8
@ionic/schematics-angular  : 1.0.6

Describe the Bug
I have a tab page with 3 differents page. In the second tab, you can push another page. But when you want to come back to the tab page thanks to the ion-back-button, you come back to the first tab instead of the second.

Thank you in advance

[siva563]

@gfitas did you already implemented tabs could you please help me.

[yuankunluo]

@gfitas , i can help. i have done some tabs with Ionic V4

[NiklasMerz]

I can confirm this issue

[siva563]

@yuankunluo Could you please help me for Tabs Issue.

tabs.html

  <ion-tabs color="primary" class="activity-tabs" tabbarPlacement="top" tabbar-highlight="true" translucent="true" use-router="true">
    <ion-tab padding-horizotal class="ionTabsPublic" label="Public" href="activeTabs/tabs/(public:public)">
      <ion-router-outlet stack name="public"></ion-router-outlet>
    </ion-tab>
    <ion-tab padding-horizotal label="Private" href="activeTabs/tabs/(private:private)">
      <ion-router-outlet stack name="private"></ion-router-outlet>
    </ion-tab>
  </ion-tabs>

tabs.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: activeTabsPage,
    children: [
      {
        path: 'public',
        outlet: 'public',
        component: PublicPage
      },
      {
        path: 'private',
        outlet: 'private',
        component: PrivatePage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/activeTabs/tabs/(public:public)'
  }
];

I am facing the problem PrivatePage and PublicPage components are loaded only once, if I need fetch the data from serve dynamically click on tab. I mean when I am clicking on tab data is not refreshing I wrote the code into ngOninit(), but it is calling only once. could you please help me solve this issue

[gfitas]

Still in V4.beta11

[hghammoud]

I have the same issue. Beta 12.

It's is related to the route at which the back button is redirecting. its redirecting to /tabs instead of /tabs/(outlet:outletname). Since you have a path'' redirection to the first page...
Seems that the history is not storing the outlet

[wamburu]

Experiencing the same issue with Beta 12.

However, using NavController.pop() works just fine.

[guigiani]

Same issue here:

ionic (Ionic CLI) : 4.3.1 (C:\Users\\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.15
@angular-devkit/build-angular : 0.8.6
@angular-devkit/schematics : 0.8.6
@angular/cli : 6.2.6
@ionic/angular-toolkit : 1.1.0

[tomfebry]

Still an issue in beta 16

[HankXu]

I have the same issue. And I navigate with the NavController.goBack() now, it can really back to the latest selected tab.

[dkeepersun]

still waiting. : )

[akhatri]

+1 I can confirm this issue too.

"@ionic/angular": "^4.0.0-beta.17",

[janilamppu]

Confirmed.

Ionic Framework: @ionic/angular 4.0.0-beta.17

[akhatri]

I think this is fixed when you upgrade to the latest beta.19 and follow the upgrades to the tab modules (lazy load) as per the changelog.

It seems to work for me. If someone else can confirm this would be great!

[janilamppu]

I updated my project to beta 19 and the issue still persists. I have 3 tabs and a button on the second tab to navigate to a new page. When Back-button is clicked in the new page, I get thrown to tab 1 instead of tab 2. Using defaultHref makes no change. I also changed the page navigation to use routerLink instead of href as adviced in the changelogs.

"@ionic/angular": "^4.0.0-beta.19",

[tomfebry]

Still seems to be in an issue in beta 19

[HankXu]

It still an issue in beta 19, though you can make it looks normal. #15216

[yuricamara]

Still an issue in 4.0.0-rc.0

For example,
<ion-back-button defaultHref="tabs/notifications"></ion-back-button>
doesn´t work as expected.

[thenaim]

+1
Still an issue in 4.0.0-rc.1

[manucorporat]

Can someone explain better what the actual issue is?

[NiklasMerz]

The issue is gone for me. Maybe the change in the tabs routing (removing the outlet stuff) fixed it. Maybe I did something different in my app.

Do others still have this issue?

[manucorporat]

@NiklasMerz right! i am confused with the @bossjon comment, saying that this is still a problem in rc.1

I have the feeling some people are talking about different issues, which makes things even more confusing?

@NiklasMerz Do you think it's good to close? We can always open a new issue

[NiklasMerz]

@manucorporat I think its good to be closed. The discussion here is to confusing here anyway. If someone still has this problem or something similar a new issue might be better.

[thenaim]

@manucorporat @NiklasMerz
ok,

1. ionic start tabIssue tabs --type=angular
2. ionic generate page new-page
3. tab2.html:

<ion-content padding>
  <ion-button color="primary" [routerLink]="[ '/new-page' ]" routerDirection="forward">
    Open new page
  </ion-button>
</ion-content>

Open tab2 page and navigate to a new-page. When back-button is clicked in the new-page, you get thrown to tab1 instead of tab2.

Ps: If you refresh the new-page with defaultHref="/tabs/tab2", then press back-button works fine.

[NiklasMerz]

OK I am navigating with the NavController in my class that`s why it works for me.

[thenaim]

@NiklasMerz
html:

  <ion-button color="primary" (click)="go()">
    Open new page
  </ion-button>

ts:

...
constructor(private nav: NavController) { }
  go() {
    this.nav.navigateForward('new-page');
  }
...

not working, can you share your code?

[NiklasMerz]

Ok my bad. Yes your description is correct. I can confirm this issue with a new project.

(I forgot that I replaced all actual ion-back-buttons with my own button which navigates to the predefined page manually. Sorry for the confusion, stupid mistake, I should have looked carefully)

[paulstelzer]

I close this as duplicate of #15216

I think my gif demonstrate the issue well -> https://github.com/ionic-team/ionic/issues/15216#issuecomment-447334318 (after navigating back it opens the first tab)

and I think it's the same issue like described here

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