ionic-team / ionic-team/ionic-framework

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

Open
#25,213 26 comments 8 reactions 0 assignees View on GitHub
package: vue type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

- [ ] v4.x
- [ ] v5.x
- [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

https://user-images.githubusercontent.com/2862059/165835293-5bd102df-7a38-4299-9fb3-0e2ccd9c4760.mp4

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

https://user-images.githubusercontent.com/2862059/165835551-55f2a5ed-ca56-4db2-99e3-5701bcda3680.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.

https://user-images.githubusercontent.com/2862059/165835966-39c29bf5-8208-48c6-9b3f-6c67257533de.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.

https://user-images.githubusercontent.com/2862059/165836231-299b5b3f-8df6-4bbe-af66-fd70d960e2f3.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.

https://user-images.githubusercontent.com/2862059/165837728-88402e4e-624f-49fe-b26a-f6b56048c1f3.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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.