bug: vue, tapping tab to go to root no longer works as expected

[MimyyK]

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

Current Behavior

When I navigate inside a tab, I can't return to the first level of the current tab with the tab button.

It happens when I use the mode="ios" on the <ion-router-outlet> and the swipe back gesture.

I have no errors in the DevTools console.

Expected Behavior

Be able to return to the first level of the current tab when I click on the tab button.

Steps to Reproduce

1 - Go to the localhost, I'm on the Tab 1 (url: /tabs/tab1)
2 - Click on "Level 1" button (url: /tabs/tab1/level1)
3 - Click on "Level 2" button (url: /tabs/tab1/level1/level2)
3 - Swipe back (url: /tabs/tab1/level1)
4 - Click on tab button "Tab 1" (url: /tabs/tab1 but I'm always on tab 1 level 1)

A small video to show the steps:
https://user-images.githubusercontent.com/1482715/158198427-b028dee5-c63d-45f7-a33d-f648efb7555b.mov

Code Reproduction URL

https://github.com/MimyyK/ionic-tabs-issue

Ionic Info

Ionic:

Ionic CLI : 6.18.2 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.0.11

Capacitor:

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

Utility:

cordova-res : not installed globally
native-run : 1.5.0

System:

NodeJS : v16.13.0 (/usr/local/bin/node)
npm : 8.5.3
OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks, I can reproduce this behavior. This broke in either 721a461 or 0b18260.

I will investigate a fix for this.

[liamdebeasi]

The problem here is that tapping the Tab1 button pushes /tabs/tab1 when it should reset the active tab stack. Given the following route path:

/tabs/tab1 --> /tabs/tab1/child1 --> /tabs/tab1/child2 --> (ion-back-button) /tabs/tab1/child1

When pushing /tabs/tab1 again, we now purge /tabs/tab1/child2 from the stack as per 0b18260 since the browser history is getting overwritten. The problem is that since /tabs/tab1/child2 is purged from the stack, there is no "leaving" view.

After discussing with the team and comparing with how native tabs work, we should not be pushing /tabs/tab1 again. Instead, we should be resetting the tab stack to the initial view.

[liamdebeasi]

Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/vue@6.0.12-dev.11647275778.16febc4f @ionic/vue-router@6.0.12-dev.11647275778.16febc4f

[MimyyK]

Thanks for your quick answer and fix !
I tested and it seems to have another issue now:
1 - Same steps of this issue
2 - Click on "Level 1" button
3 - Click on "Tab 1" tab button

Video:

Enregistrement.de.l.ecran.2022-03-14.a.17.50.23.mov

[liamdebeasi]

Thanks for testing. Can you give this dev build a try? It should resolve the issue you reported in #24934 (comment).

npm install @ionic/vue@6.0.12-dev.11647277913.1421a085 @ionic/vue-router@6.0.12-dev.11647277913.1421a085

[MimyyK]

Thanks for the correction, that resolve this issue but there is another problem when I switch tabs during navigation, but maybe it is not related to this issue:
1 - Click on "level 1" button -> /tabs/tab1/level1
2 - Click on "level 2" button -> /tabs/tab1/level1/level2
3 - Click on "Tab 2" tab button -> /tabs/tab2
3 - Click on "Tab 1" tab button -> /tabs/tab1/level1/level2
4 - Swipe back -> /tabs/tab1/level1
5 - Swipe back -> /tabs/tab1/level1
6 - Try to click on "Level 1" button
If I try to click on "Tab 1" button, the "Level 1" page component is displayed

There is no errors on the DevTools console

A video:
https://user-images.githubusercontent.com/1482715/158232012-d23ecfdd-9fa5-49fc-b158-19d048f39d61.mov

[MimyyK]

I just tried with "@ionic/vue": "^6.0.11" and "@ionic/vue-router": "^6.0.11" and there is this issue

[liamdebeasi]

Thanks for the feedback. Would you mind opening a separate issue for this? You can include the same sample app, but having separate issues makes it easier for us to track bugs.

[MimyyK]

Yes I understand and I will open another issue.
Thank you for this fix and the reactivity !

[liamdebeasi]

Thanks for the issue. This has been resolved via #24935, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.