bug: (Vue) Ionic Tabs tab-selected class incorrectly staying after transitioning to different tab not in list.

[mattmilan-dev]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

When using the vue-router's replace method to a child route of the TabsComponent but not on the tab itself, the previous tab stays with the 'tab-selected' class on it.

Expected behavior:

When routing to the next page, the tab button should lose the 'tab-selected' class.

Steps to reproduce:

Instructions in the readme of the repo below, but pull, run ionic serve click the 'Goto tab 3' button. Note how the tab one route stays activated.

Alternatively run ionic start --type=vue and choose tabs. Goto the Tabs view and remove Tab3 from the element. Goto the Tab 1 view and add a button to use router.replace to go to tab3. Note how the tab 1 keeps the tab-selected class on it.

Related code:
https://github.com/mattmilan-dev/Ionic-Vue-Incorrect-Activated-Route-State/tree/master

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.12.1 (/Users/devleaf_matt/.npm-global/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.5.1

Capacitor:

   Capacitor CLI   : 2.4.3
   @capacitor/core : 2.4.3

Utility:

   cordova-res : 0.15.2
   native-run  : 1.2.2

System:

   NodeJS : v12.18.1 (/usr/local/bin/node)
   npm    : 6.14.8
   OS     : macOS Big Sur

Thanks in advance Liam ;)

[liamdebeasi]

I plan on taking a look at this after the holidays, but as a temporary workaround, you can add the required ion-tab-button but just hide it with the .ion-hide utility class:

<ion-tab-button tab="tab3" href="/tabs/tab3" class="ion-hide">
  <ion-label>Tab 3</ion-label>
</ion-tab-button>

[liamdebeasi]

Thanks for the issue. This has been resolved via #23000, 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.