Ionic-framework: bug: ionic vue not selecting correct tab after going back

[MarekGogol]

Bug Report

Ionic version:
[ ] 4.x
[x] 5.x

Current behavior:
When you click on tabs in this order "Tab 2, Tab 3, Tab 1", and then you swipe left, you should be on "Tab 3". But router will redirects you on Tab 2, what is incorrect.

Expected behavior:
As mentioned above, from "Tab 1" you should be navigated on "Tab 3".

Steps to reproduce:
If you install demo vuejs 3 app with tabs example, bug will be present in this demo app. Install according to this article https://ionicframework.com/blog/announcing-the-new-ionic-vue-beta/ .

Intallation steps:
ionic start my-app tabs --type vue --tag vue-beta
ionic serve

then click "Tab 2, Tab 3, Tab 1" and swipe left. Router will navigate you on Tab 2, but in url you will be in Tab 3. This is buggy behaviour. Then all tabs navigation will be buggy.

packages:

    "@ionic/vue": "5.4.0-rc.1",
    "@ionic/vue-router": "5.4.0-rc.1",
    "core-js": "^3.6.5",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0"

Here is attached video with wrong behaviour.

routing-bug.mov.zip

Ionic info:

Ionic:

   Ionic CLI       : 6.11.8-testing.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.4.0-rc.1

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res                          : 0.15.1
   native-run (update available: 1.2.1) : 0.3.0

System:

   NodeJS : v12.18.4 (/usr/local/bin/node)
   npm    : 6.14.6
   OS     : macOS Catalina

[MarekGogol]

Looks like this comment fixed this issue.

https://github.com/ionic-team/ionic-framework/issues/22286#issuecomment-707283016

[MarekGogol]

@liamdebeasi with given checkouts from you comment #22286, new bug appears.

If you click on "Tab 1", then "Tab 2", then "Tab 3", then press back 2 times (you will be on Tab 1), and then you click on "Tab 3". Navigation will open Tab 2 instead.

routing-bug-2.mov.zip

[liamdebeasi]

Thanks for the issue. I can confirm that the behavior you noted in https://github.com/ionic-team/ionic-framework/issues/22307#issuecomment-707710673 is indeed a bug. Here is a dev build if you would like to try the fix out:

npm install @ionic/[email protected] @ionic/[email protected] --save-exact

edit: I found a bug in this fix. I will address it and provide a new dev build soon.

Your original issue in https://github.com/ionic-team/ionic-framework/issues/22307#issue-720175824 has already been fixed and will be resolved in an upcoming release of Ionic Framework.

[liamdebeasi]

Thanks for your patience. I was able to resolve the lingering issues with my PR. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected] @ionic/[email protected] --save-exact

[gilbertsmink]

I can confirm that the dev build resolves the issue! Super, thanks!

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/22309, and a fix will be available in an upcoming release of Ionic Framework.

[HakobiDev]

This bug still exist if 5 tabs try to navigate is tab 2 then back 2 times routing is stop working additional if app is running in background and open again the routing will stop working, I will open an another issue for this in vue package