bug: switching between shared tab urls does not preserve individual tab stack history

[philmmoore]

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Within an application we may want to switch from one tab to another to see what information is on the other tab.

If I am on Tab 2 and navigate to a child route /tabs/tab2/view then tap on Tab 3 from the tab bar and again navigate to a child route within Tab 3 /tabs/tab3/view I am able to switch between Tab 1, 2 and 3 and the correct views are displayed

Simulator.Screen.Recording.-.iPhone.12.Pro.-.2022-04-28.at.20.57.19.mp4

If I then navigate to Tab 3 and press back (uses IonBackButton) the view will correctly navigate back.

Simulator.Screen.Recording.-.iPhone.12.Pro.-.2022-04-28.at.20.59.03.mp4

But If I then go to Tab 2 from the tab bar you'll notice that on Tab 2 I no longer have a back button and can no longer get back to the preview view.

Simulator.Screen.Recording.-.iPhone.12.Pro.-.2022-04-28.at.21.00.56.mp4

Tabbing to Tab 1 or 3 does not help. Only tapping the tab on the tab bar quickly does anything but you then have to navigate away and back again.

Simulator.Screen.Recording.-.iPhone.12.Pro.-.2022-04-28.at.21.02.03.mp4

Expected Behavior

I would expect to be able to navigate to child routes within tabs and each nav stack work independently so that I could travel X number of levels deep in Tab 2 then Tab into Tab 3 and again travel X number of levels deep. If I then wanted to get back to the root view for the tab I would either tab the tab bar quickly to 'popToRoot' or use the IonBackButton within each child view to make my way back up.

Steps to Reproduce

Repro steps should be pretty self explanatory based on the videos shown in the current behaviour.

Simulator.Screen.Recording.-.iPhone.12.Pro.-.2022-04-28.at.21.13.06.mp4

1. Tab to Tab 2
2. Tap Go to view
3. Tab to Tab 3
4. Tap go to view
5. Tab back to Tab 2 and press the back button
6. Tab back to Tab 3 and you'll see the back button has gone
7. Double tap Tab 3 (notice there's a slight flicker in the video above)
8. Tab back to Tab 2 and then straight back to Tab 3
9. Notice that you're now back on the root view for the tab

Code Reproduction URL

https://github.com/philmmoore/ionic-tabs-bug

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/Users/philmmoore/.nvm/versions/node/v16.11.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.1.3

Capacitor:

Capacitor CLI : 3.5.0
@capacitor/android : not installed
@capacitor/core : 3.5.0
@capacitor/ios : 3.5.0

Utility:

cordova-res (update available: 0.15.4) : 0.15.3
native-run : 1.5.0

System:

NodeJS : v16.11.1 (/Users/philmmoore/.nvm/versions/node/v16.11.1/bin/node)
npm : 8.0.0
OS : macOS Big Sur

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Does this dev build help at all? I am fixing a similar issue in #25206.

npm install @ionic/vue@6.1.3-dev.11651080471.167ddf56 @ionic/vue-router@6.1.3-dev.11651080471.167ddf56

[philmmoore]

Hey @liamdebeasi still able to follow repro steps and it fails.

Happy to try any other dev builds when they're ready 👍

Simulator.Screen.Recording.-.iPhone.12.Pro.-.2022-04-29.at.01.03.02.mp4

[productdevbook]

CleanShot.2022-04-29.at.08.06.04.mp4

ionic ios router-link change menu bug

iam used vue and version 6.1.3

some problem

[liamdebeasi]

@productdevbook That behavior appears to be unrelated to the issue being discussed in this thread. Please open a separate issue.

[liamdebeasi]

Hey @liamdebeasi still able to follow repro steps and it fails.

Happy to try any other dev builds when they're ready 👍

Simulator.Screen.Recording.-.iPhone.12.Pro.-.2022-04-29.at.01.03.02.mp4

Thanks for testing! The issue appears to be that when going back to Tab 3 for the second time, the browser is wiping the history. The reason for this is when you go back to Tab 2 (you should be on the Tab 2 child page) and press the ion-back-button, we call router.go() to go back to the previous instance of Tab 2. When you tap Tab 3, we push a new /tabs/tab3/view route which causes the browser to clear its routing history.

---

The big limiting factor here is that the browser history wants linear navigation. Mobile tabs are non-linear by nature as each tab is its individual stack.

For example, consider the following flow:

/tabs/tab2 --> /tabs/tab2/view --> /tabs/tab3 (tap the Tab 3 button) --> /tabs/tab3/view --> /tabs/tab2/view (tapping the Tab 2 button again).

If you press the ion-back-button you should go back to /tabs/tab2. This is what happens right now.

However, if you press the hardware back button multiple times on an Android device, you should be taken backwards through the following flow:

/tabs/tab3/view --> /tabs/tab3 --> /tabs/tab2. Note that going from /tabs/tab3 brings you to /tabs/tab2 not /tabs/tab2/view. The reason for this is we already popped /tabs/tab2/view off the Tab 2 stack. This does not happen due to the issue I noted above.

---

Both the issue you noted and the hardware back button issue stem from how we push new routes when switching between tabs. I have a few ideas for how we can solve this, so I am going to talk with the team and see which option is best.

[liamdebeasi]

The ion-back-button issue reproduces in Ionic Vue, but the hardware back button issue reproduces across Ionic Angular, Ionic React, and Ionic Vue.

I tested this using the Ionic React Conference App and the Ionic Angular Conference App.