bug: vue, updating class attribute causes tabs state to get changed

[virusv]

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

If you use dynamic attributes on the ion-tabs and ion-tab-bar elements, such as class or style. When switching between tabs, their history is reset.

Expected Behavior

Changing the class and other attributes of ion-tabs and ion-tab-bar does not reset the tab history.

Steps to Reproduce

1. Clone repository (code reproduction URL)
2. npm install && npm run serve
3. Follow the steps below ↓

[tab X] - click action on a tab named X
→ - go to the child page (click on the next button)

Tab behavior, with dynamic attributes in ion-tabs or ion-tab-bar (for example, it can be class or style)
Transition option 1: [tab A] A0 → A1 → A2 [tab B] B0 → B1 → B2 [tab C] C0 → C1 → C2 [tab A] A0 (ERROR) [tab B] B0 (ERROR) [tab C ] C0 (ERROR)
Transition option 2: [tab A] A0 → A1 → A2 [tab B] B0 → B1 [tab A] A0 (ERROR)
Jump option 3: [tab A] A0 → A1 → A2 [tab B] B0 [tab A] A2 [tab B] B0 [tab C] C0 [tab A] A0 (ERROR)

Error.history.mp4

---

Open file scr/views/TabsPage.vue, comment block:

onBeforeUnmount(router.beforeEach((to, from, next) => {
  className.value = 'class-name-' + Math.round(Math.random() * 10000);
  next();
}));

Normal tab behavior:
Transition option 1: [tab A] A0 → A1 → A2 [tab B] B0 → B1 → B2 [tab C] C0 → C1 → C2 [tab A] A2 [tab B] B2 [tab C] C2
Transition option 2: [tab A] A0 → A1 → A2 [tab B] B0 → B1 [tab A] A2
Transition option 3: [tab A] A0 → A1 → A2 [tab B] B0 [tab A] A2 [tab B] B0 [tab C] C0 [tab A] A2

Ok.history.mp4

Code Reproduction URL

https://github.com/virusv/ionic-tabs-app-router-bug

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (C:\Users\naliv\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/vue 6.0.3

Capacitor:

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

Utility:

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

System:

NodeJS : v16.13.1 (C:\Program Files\nodejs\node.exe)
npm : 8.1.2
OS : Windows 10

Additional Information

This is all due to the updated() event firing on the Vue ion-tab-bar component, which in turn calls setupTabState(ionRouter: any) which resets the tab history.

[liamdebeasi]

Thanks for the issue. I can reproduce this. It looks like updating the class attribute is causing a re-render of the tabs components, causing these methods to re-run as if they were being setup for the first time: https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/src/components/IonTabBar.ts#L50