[Bug Report][3.4.3] VTabs color prop not working with href

[Larsluph]

Environment

Vuetify Version: 3.4.3 Vue Version: 3.3.4 Browsers: Edge 119.0.0.0 OS: Windows 10

Steps to reproduce

1. Create a v-tabs component with a color prop
2. Create some v-tab inside it with and without href

Expected Behavior

Color class is injected regardless of the href attribute

Actual Behavior

Text stays white and color class isn't injected

Reproduction Link

https://play.vuetifyjs.com/#...

[websitevirtuoso]

Set class or color for tab? https://play.vuetifyjs.com/#eNptUdFKwzAU/ZVLFKqwteh8kLEpgoLPvviwDpamty4sbUKSlsnYv3vTbK4Vn5J7zsnp6T2rA3NWZC/GpF2LbM4WHmujuMenvAFYdFNuTH/tB6Ebz2WD9gT1oOeFg25a6xLVMmc0fmCVMxBaaUuAxZKm4oteR8BYWXP7nbNfl7PPZQZyrHo1wSAbCF955Z7nbCiad1y1GFV/GI97/y+xtVgRId07Xd4aXigs4Rk2V9n1gdTHDcyhbUqs6Ecp+fCtUNy5YEre00JxsRvy2WUrWVwLAYNFiS2KXaH3g2WNQtCWFC96/FP6LYSghJ1tg+m4gIDEfhbZoDcanbDSeHDo21ifrI22Hg5AnnCEyuoaEqo8iQnJ13kYr2QZtDcVVw5vL5pY74lMaLpLiB3xfU+kWEV6AuG8T9YhZgxGkdhxwmbpLH1k4XxIZ2z9Az1ayZk=https://play.vuetifyjs.com/#eNptUdFKwzAU/ZVLFKqwteh8kLEpgoLPvviwDpamty4sbUKSlsnYv3vTbK4Vn5J7zsnp6T2rA3NWZC/GpF2LbM4WHmujuMenvAFYdFNuTH/tB6Ebz2WD9gT1oOeFg25a6xLVMmc0fmCVMxBaaUuAxZKm4oteR8BYWXP7nbNfl7PPZQZyrHo1wSAbCF955Z7nbCiad1y1GFV/GI97/y+xtVgRId07Xd4aXigs4Rk2V9n1gdTHDcyhbUqs6Ecp+fCtUNy5YEre00JxsRvy2WUrWVwLAYNFiS2KXaH3g2WNQtCWFC96/FP6LYSghJ1tg+m4gIDEfhbZoDcanbDSeHDo21ifrI22Hg5AnnCEyuoaEqo8iQnJ13kYr2QZtDcVVw5vL5pY74lMaLpLiB3xfU+kWEV6AuG8T9YhZgxGkdhxwmbpLH1k4XxIZ2z9Az1ayZk=

[Larsluph]

It seems your link is invalid, I got the following exception: DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

Anyway, the only color I can set on the v-tab element is the slider-color which doesn't change the text color. And for the class I did that as a workaround. I detect if the tab is active and apply the color class if needed: :class="{ 'text-accent': innerTabV === value }"

[websitevirtuoso]

[Larsluph]

What I want is change the color of the focused tab. When not using the href attribute, the color prop does exactly that. If I want to use the href prop with that behavior, I need to use a workaround to apply the color class only if the tab is the only currently focused.

[Larsluph]

After some research I found that the following snippet controls whether to inject color classes or not. By playing with link.isLink.value, this in fact enabled the color prop with the href attribute. I assume this is an expected behavior given that it is present on a more generic component (namely VBtn).

https://github.com/vuetifyjs/vuetify/blob/b50e9ad559fc4d958ff2f6ed7f873c3efcd592af/packages/vuetify/src/components/VBtn/VBtn.tsx#L161-L164

[websitevirtuoso]

we have prop selected-color or selected-class check it out

[Larsluph]

There's no such thing as selected-color prop in the documentation. However the color prop explicitly tells us that it should paint the selected tab to that color, which is not when using the href attribute. The selected-class prop may be a better workaround but that's still a bug for me.

https://vuetifyjs.com/en/api/v-tabs/#props-color

[websitevirtuoso]

I tried to help and everything works for me

[Larsluph]

Thanks for your help, I found a workaround for that issue. I just wanted to report that the behavior described in the docs is not working while using the href attribute.

[KaelWD]

The problem is this uses link.isActive even though that only applies for :to links: https://github.com/vuetifyjs/vuetify/blob/72f33dcd84ef3a3799ec1312a5eaa42e320b3e92/packages/vuetify/src/components/VBtn/VBtn.tsx#L128

[Larsluph]

Using the :to prop instead of :href does apply color as expected.

[KaelWD]

Yeah cool it's still a bug though.

[david2242]

I added a comment here: https://github.com/vuetifyjs/vuetify/issues/20348#issuecomment-2740449939

They might be connected.