bug: Vue - Tabs - 5.9.2 - Double click on TabButton breaks tabs-routing

[Predarion]

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 double clicking a Tab, routing to other Tabs when pressing their TabButton is not working anymore. See:

Screen.Recording.2021-12-09.at.08.32.03.mov

Expected Behavior

Expected to be routed to the Tab when pressing on the Tab2-TabButton (Step 4).

Steps to Reproduce

1. Click on Tab2 --> Routes to Tab2
2. Click on Tab1 --> Routes to Tab1
3. Click Tab1 again --> nothing happens (we already are on the correct tab)
4. Click Tab2 --> route changes but we are not routed to Tab2

Reprocution code is simply a Tabs starter project generated with:

ionic start ionic-vue-tabs-double-tab-bug tabs --type vue

and changed these two lines in the package.json to:

    "@ionic/vue": "5.9.2",
    "@ionic/vue-router": "5.9.2",

Code Reproduction URL

https://github.com/Predarion/ionic-vue-tabs-double-tab-bug

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

   Require stack:
   - /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
   - /usr/local/lib/node_modules/@ionic/cli/lib/index.js
   - /usr/local/lib/node_modules/@ionic/cli/index.js
   - /usr/local/lib/node_modules/@ionic/cli/bin/ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'

   Require stack:
   - /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
   - /usr/local/lib/node_modules/@ionic/cli/lib/index.js
   - /usr/local/lib/node_modules/@ionic/cli/index.js
   - /usr/local/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 5.9.2

Capacitor:

Capacitor CLI : 3.3.3
@capacitor/android : not installed
@capacitor/core : 3.3.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.1.0
OS : macOS Big Sur

Additional Information

This bug might be introduced with the changes from

• vue: switching between tabs preserves query string (#24297) (047d3c7), closes #23699

as this behavior does not occur with version 5.9.1, but does occur with version 5.9.2 and the dev build of aboves issue:

npm install @ionic/[email protected] @ionic/[email protected]

[Predarion]

@liamdebeasi this issue seems quite critical to me again.

[liamdebeasi]

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

[Predarion]

@liamdebeasi thanks for fixing that fast! Locally, another issue occurs that might also be resolved with this fix. Do you have a dev build available which I could use to test this out?

[liamdebeasi]

Sure! Here is the dev build. Note that this is an Ionic 5 dev build, though the fix will be available in both Ionic 5 and Ionic 6:

npm install @ionic/[email protected] @ionic/[email protected]

[liamdebeasi]

This has been released in Ionic 6.0.1 and Ionic 5.9.3. Ionic 5 users can use the v5-lts tag to get the latest version of Ionic 5:

npm install @ionic/vue@v5-lts @ionic/vue-router@v5-lts

[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.