ionic-team / ionic-team/ionic-framework
bug: switching between shared tab urls does not preserve individual tab stack history
- 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
Assessment
This issue has not been assessed yet.