primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.84k stars 1.24k forks source link

Tabs: Animating to tab without route being changed #6832

Open james-onpoint opened 4 days ago

james-onpoint commented 4 days ago

Describe the bug

I'm using Tabs > TabList > Tab components to do some navigation within a component using the router to handle the content, the tabs are just a navigation means.

The problem is that they are often buggy, if I switch between the two quickly or sometimes just seemingly for no reason, the tabs will animate to the clicked tab as expected but the route change from my NuxtLink has not not happened.

Code (ignore the @click.stop.prevent, this was me "trying" to fix it:

<script setup lang="ts">
import Tabs from "primevue/tabs";
const props = defineProps(['items', 'value']);

const route = useRoute();

const selectedTab = computed(() => {
  if (props.items)
  {
    for (let i = 0; i < props.items.length; i++)
    {
      if (route.path.toLowerCase().includes(props.items[i].route.toLowerCase()))
      {
        return props.items[i].route;
      }
    }
  }
  return null;
});
</script>

<template>
<!--  TODO: FIX BUGGY FAST SWITCHING-->
  selectedTab: {{selectedTab}}
  <Tabs :value="selectedTab">
    <TabList>
      <Tab @click.stop.prevent="()=>{}" v-for="tab in items" :value="tab.route">
        <NuxtLink v-if="tab.route" :to="tab.route">
          <div class="cursor-pointer flex items-center gap-2 text-inherit">
            <i :class="tab.icon"></i>
            <span>{{tab.label}}</span>
          </div>
        </NuxtLink>
      </Tab>
    </TabList>
  </Tabs>
</template>

Please see below screenshots of what is happening, the correct behaviour should look like this: Screenshot 2024-11-21 at 20 36 25 Screenshot 2024-11-21 at 20 36 33

When the bug happens, this is what it could look like (tab is Settings, route and selectedTab are details): Screenshot 2024-11-21 at 20 36 25

I expect that this isn't a bug in PrimeVue and it is more my lack of deep-understanding of reactivity in Vue etc.

Any tips? Thanks a lot

Reproducer

none

PrimeVue version

4.1.0

Vue version

3.x

Language

ALL

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

github-actions[bot] commented 12 hours ago

We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.