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>