bug: tab sub-page navigation breaks occasionally with ionic-vue-router

[socialmedialabs]

trafficstars

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

Navigating into tab sub-page and clicking on the respective tab bar in order to get to the initial tab page breaks navigation occasionally. Either nothing happens or the following error viewItem2 is undefined is shown, sometimes subsequently followed by this error enteringEl is undefined.

When this happens the navigation for the view in question stays broken. Other routes may keep working but eventually they stop working as well. The broken navigation point may starts working again.

Expected Behavior

Inside a tab navigating to a sub page and then to another tab and then back to the initial sub page and then clicking on the tab of the sub page again should lead me to the initial tab page, regardless of the order of navigation steps I took before.

Steps to Reproduce

Unfortunately there I wasn't able to identify precise steps in order to reproduce this. But I think these are steps that should work

1. On Tab 1 click the Next button in order to enter Tab 1 sub page
2. Click on Tab 5
3. Click on Tab 3
4. Click the Next button on Tab 3 in order to enter Tab 3 sub page
5. Click on Tab 5 again
6. Click Tab 1 (you should be on Tab 1 Sub Page)
7. Click Tab 1 again in order to get to initial page of Tab 1
8. There it is TypeError: viewItem2 is undefined @ionic_vue_router.js:562:7
9. (If it's not broken by now go to Tab 3 (you should be on the sub page there), click Tab 3 again in order to get to the inital page of Tab 3 - Tab 3 doesn't do anything anymore)

Code Reproduction URL

https://stackblitz.com/~/github.com/socialmedialabs/ionic-sample-tabs-app

Ionic Info

Ionic:

Ionic CLI : 5.4.16 (/home/ubuntu/.nvm/versions/node/v21.6.1/lib/node_modules/ionic)

Capacitor:

Capacitor CLI : 6.0.0 @capacitor/core : 6.0.0

Utility:

cordova-res : not installed native-run : 2.0.1

System:

NodeJS : v21.6.1 (/home/ubuntu/.nvm/versions/node/v21.6.1/bin/node) npm : 10.2.4 OS : Linux 6.5

Additional Information

The coresponding Github repo can be found here: https://github.com/socialmedialabs/ionic-sample-tabs-app

[thetaPC]

Thank you for submitting the issue!

I was able to replicate it with your steps.

[EA-Wardie]

I've also been having this issue. Or something very similar.

Re-creation is pretty consistent (v8.x): If at least two tabs are one sibling page deep, using the back functionality in one of them, breaks the back functionality in the other. And in some cases breaks that tab's navigation completely if you're switching between multiple tabs.

Navigating back can be done by either tapping the tab button again or using an <ion-back-button>.

StackBlitz

[socialmedialabs]

Any estimation on when you will look into this issue? I learned that this (or a very similar) issue already showed up in previous versions.

I feel like this is a major issue as it means that ion-tabs in fact can't be used at all.

[answeb]

Hi ! Any update on this ? We ran into this issue, and were forced to use component navigation, loosing the url/hashnav state, and all features for this. Like @socialmedialabs said, i really think it means that ion-tabs can't be used at all...

This problem exists since the previous versions of ionic (I tested with v7 and v7-lts). Did any one managed to use this non-linear navigation ? is it only with ionic/vue ? is there at least a way to "force" the click on a tab to go to the root of the tab (linear navigation) ?

[suchyjan]

I have exactly the same problem as provided in example on StackBlitz. I have an app that is blocked from being deployed to the Google Play store because of this error. Using tabs is a common use case and this error is quite critical. Please prioritize if possible. Thank you.

[ruettenm]

Also have the same problem. Is there any progress?