o-tab-item content hidden on page load

[gmcinalli]

Overview of the problem

Oruga version: 0.6.0 Nuxt version: 3.5.1 OS/Browser: macOS 13.3.1 (a) / Google Chrome 113.0.5672.126

Description

The content of o-tab-item is hidden on page load if the tab is programmatically selected via v-model on o-tabs.

I noticed that this problem doesn't occur if the pre-selected tab is the first available one.

The problem starts to appear from Oruga version 0.5.0.

Steps to reproduce

Full reproduction: https://stackblitz.com/edit/nuxt-starter-gqrjtc?file=app.vue

Expected behavior

The content of the selected tab should be displayed on page load as it was with the pre-0.5.0 versions.

Actual behavior

The content of the selected tab is hidden on page load until you select another tab and return to the desired one.

[learntheropes]

The problem occurs also if the pre-selected tab is the first available one.
See my reproduction here: https://stackblitz.com/edit/github-zcrtvq-w7tjtp

Oruga version: [email protected] (latest) Vuejs version: [email protected] Nuxtjs version: [email protected] (latest) OS/Browser: Chromium Version 116.0.5845.179 (Official Build) snap (64-bit) on Ubuntu 22.04.3 LTS Brave [Version 1.57.53 Chromium: 116.0.5845.114 (Official Build) (64-bit)] on Ubuntu 22.04.3 LTS Firefox 117.0 (64-bit) on Ubuntu 22.04.3 LTS Brave 1.56 on IOS 16.6.1 Chrome 116.0.5845.172 on Android 8.0.0

[learntheropes]

A dirty workaround while this get fixed: https://stackblitz.com/edit/github-zcrtvq-fie9nh

[zhaolinlau]

when will this bug get fixed?

[mlmoravek]

@zhaolinlau I will look at it when I have some time.

[mlmoravek]

@gmcinalli Could you check again with version 0.8.x?

[gmcinalli]

Hi @mlmoravek, unfortunately I'm on Vue 2, so the last version that I can try is 0.7.0.

[jtommy]

@zhaolinlau @learntheropes any news?

[messenjer]

Hello,

I updated the reproduction with the latest version of Nuxt and Oruga and it's fixed.

  "devDependencies": {
    "@types/node": "^18",
    "nuxt": "^3.11.1"
  },
  "dependencies": {
    "@oruga-ui/oruga-next": "^0.8.6",
    "@oruga-ui/theme-oruga": "^0.2.2"
  }

• https://stackblitz.com/edit/nuxt-starter-gpnmyh?file=app.vue

When I load the page the second tab is visible.

Regards

Mathieu

[mlmoravek]

@messenjer Thanks for checking this.

If anyone has any further problems with this, please let me know or reopen this issue again :)