TabView: onTabChange + activeIndex styling issues with unstyled mode + Tailwind.

[eklee]

Describe the bug

Tabview controlled mode partially works with unstyled + Tailwind styling. Clicking on tabs will change the tab panel content, but the active highlight seems to be stuck on the initial state of activeIndex.

Reproducer

https://stackblitz.com/edit/q1g8yj-xluy87

System Information

PrimeReact version
10.8.2

React version
18.x

Language
TypeScript

Build / Runtime
Vite

Browser(s)
Chrome 127

Steps to reproduce the behavior

Goto this Stackblitz project - https://stackblitz.com/edit/q1g8yj-xluy87 - click on the Theme and Language tabs, notice the tab content changes, but the tab itself always have active highlight on the first tab, even after you click on the 2nd tab.

Expected behavior

Adding onTabChange callback handler should not stop tab switching from working

[melloware]

@eklee by design see the Controlled demo: https://primereact.org/tabview/#controlled

Once you start using ontabChange you have now switched to Controlled mode and must track the activePage yourself.

[eklee]

@melloware - it does look like onTabChange + activeIndex works on styled template. But it seems to be partially working on unstyled + Tailwind. With unstyled + Tailwind, clicking on tabs do change the tab content, but the active tab highlight does not change. I have created another fork here: https://stackblitz.com/edit/q1g8yj-xluy87 and updated the bug description.

An example is this: the content is showing language, but the tab highlight is stuck on Theme.

[melloware]

Ok if it's tailwind related is it this issue: #6868

[melloware]

Fixed with @gcko PR #7057

[onn-software]

Hey, I can see it's closed, and perhaps I should open a new issue. But I'm using unstyled + tailwind as well, and encounter the same issue. After upgrading to 10.8.3 the tabs crash:

TypeError: Cannot read properties of undefined (reading 'state') at headerAction (index.esm.js:297:213)

When I change te be resilient against undefined, the tab UI does not reflect active state

'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': parent?.state.activeIndex !== context?.index,

The reproduction for me is as easy as this, it will crash immediatly.

<PrimeReactProvider
              value={{ unstyled: true, pt: Tailwind, ripple: true }}
            >
    <TabView>
        <TabPanel header='A'>A</TabPanel>
        <TabPanel header='B'>B</TabPanel>
    </TabView>
</PrimeReactProvider>

[onn-software]

I'll make a proper bug later today

[gcko]

I fixed this just 30 minutes ago it is tied to #7201 - pr #7212