TabView: Does not show which Tab is selected when using TabPanel with template

Describe the bug

TabView does not show which Tab is selected when using TabPanel with template and PrimeReact is set with Arya Orange theme.

It does work with Lara Indigo theme.

Reproducer

https://codesandbox.io/s/primereact-demo-forked-7whkn5

PrimeReact version

9.6.0

React version

18.x

Language

ES6

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

Just click the TabPanel with template "Amy Elsner" or the one with the split button.

TabView does not show those Tabs selected.

Expected behavior

TabPanels must be displayed selected even if they use templates and the theme is Arya Orange

[melloware]

OK its not related to Theme Orange it seems to be in general because of your custom rendering of Tab HEaders.

here i made it look much better but there is some padding issues with the SplitButton: https://codesandbox.io/s/primereact-demo-forked-k66s2d?file=/src/App.js

Hi @melloware

First of all, thanks for your response.

Indeed with the workaround you mention, it may work, but I still think there is something wrong with the Arya Orange theme.

The first indication is that, as I mentioned in the description, the layout works as it should when using the Lara Indigo White theme("lara-light-indigo") . If in the same page of the component you change the theme to Arya Orange you can also reproduce the error.

https://primereact.org/tabview/#template

...or use the "lara-light-indigo" theme in my forked codesandbox and you will see that it works as expected.

I wanted to go further and went into the css of each style and found differences:

Lara Indigo White:

https://github.com/primefaces/primereact/blob/master/public/themes/lara-light-indigo/theme.css#L6194

See how here the div position is absolute which makes "left" work and show the bar.

Aray Orange:

https://github.com/primefaces/primereact/blob/master/public/themes/arya-orange/theme.css#L4225

Here the div is not assigned to absolute position, so it stays in static which makes the "left" property not work.

Also you see that it expects the "p-tabview-nav-link" to have a parent "li", which is not the case.

[melloware]

Excellent debugging let me confirm what you are seeing.

[melloware]

OK I linked your issue here: primefaces/primereact-sass-theme#29

And I submitted PR here: primefaces/primereact-sass-theme#30