Navigation not working when switching between 2 lazy loaded pages with tabs

[christian-hager]

Ionic version: (check one with "x")
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report

Current behavior:
When switching between 2 lazy-loaded pages with tabs the page from the tab that was selected in the source tabs page is displayed in the target tabs page.

Expected behavior:
The target tabs page should show the page which is set in its selected tabs root parameter.

Steps to reproduce:

1. Clone my sample app from https://github.com/christian-hager/lazyApp.git
2. Run the app using ionic serve and access it in the browser (in my case chrome)
3. Use the menu to switch to the Tabs2 – So far everything is fine
4. Switch back to Tabs --> Now I see the correct Tabs in the bottom but the displayed page is still page3 which was never supposed to be shown in Tabs
5. If I now click Tab1 it loads the correct page which is Tab1

Other information:

Something similar happens if I switch from Tabs to Tabs2 and then to the SplitPane. In this case the right side of the Splitpane shows Tab3.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: 

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 25.2.5
    Node              : v6.9.1
    npm               : 4.1.2
    OS                : Windows 10

[danbucholtz]

Hi @christian-hager,

I'll check this out as soon as I get a chance. It might be a few weeks as we're all hands on deck with a large refactor for Ionic 4 right now and not really fixing bugs presently. Bug fixing will resume shortly.

Thanks,
Dan

[Pekes317]

I would like to second this issue. I have been seeing this same thing. Even the URL changes incorrectly, the last segment doesn't change to reflect the new page. Also, I have noticed that this issue only occurs when moving from tabs section to another tabs section. If you go to a plan page them to the other set of tabs then navigation seems to be as expected.

[pvanhemmen]

I can confirm this issue. Has anyone found a workaround yet like unsetting the active tab from the previous page manually before setting the new tabbed page as new page root?

[pvanhemmen]

OK, here is a solution. By defining the url segment of the path on the tab itself, page changes are handled correctly.

An excerpt from app.component.ts in the deep linking section:

// Event
{ component: DetailTabsPage, name: 'DetailTabsPage', segment: 'event' },
{ component: DetailOverviewPage, name: 'DetailOverviewPage', segment: '' },
{ component: DetailDescriptionPage, name: 'DetailDescriptionPage', segment: '' },

// Participants
{ component: ParticipantsTabsPage, name: 'ParticipantsTabsPage', segment: 'matches' },
{ component: ParticipantsListPage, name: 'ParticipantsListPage', segment: '' },
{ component: ParticipantsConfigurePage, name: 'ParticipantsConfigurePage', segment: '' }

...and from one of the tabbed pages:

<ion-tab [root]="tab1Root" tabTitle="{{ 'PARTICIPANT_LIST' | translate }}" tabIcon="list" [tabUrlPath]="'list'"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="{{ 'CONFIGURE' | translate }}" tabIcon="settings" [tabUrlPath]="'configure'"></ion-tab>

Notice the empty segment definitions in the deep linking section and therefore the additional [tabUrlPath] attribute on the ion-tab tag.

[danbucholtz]

Hi,

We'll take a look at this ASAP.

Thanks,
Dan

[danbucholtz]

Going to close and track the issue here:

#12625

Thanks,
Dan