[Bug Report][2.5.8] Color prop is not working for v-list-item

[Mikilll94]

Environment

Vuetify Version: 2.5.8
Vue Version: 2.6.14
Browsers: Chrome 93.0.4577.82
OS: Windows 10

Steps to reproduce

1. Create some v-list-items with to prop.
2. Set the color in v-list-item.
3. The color prop is not working. v-list-item color is not changed when it is in active state.

According to the docs it should change the color, when it is in the active state:
https://vuetifyjs.com/en/api/v-list-item/#props-color

Expected Behavior

Color should change to the selected one when v-list-item is in the active state.

Actual Behavior

Color is not changed from the default one when v-list-item is in the active state.

Reproduction Link

https://codepen.io/mikilll94/pen/MWoBjLr

[yuwu9145]

@Mikilll94

As doc url indicates:

Colour will be applied when the item is in an active state or input-value is true.

v-list does not maintain active state but v-list-item-group does, so you can just simply wrap v-list-item with v-list-item-group.

Reproduction link has been refactored to have a solution:

https://codepen.io/yuchaosydney/pen/NWgOZOz

[Mikilll94]

@yuwu9145
Hello,
Thanks for your response. Unfortunately your solution has a bug. You can see it on this GIF:

When I have selected "Page 2" and I refreshed the page, the "Page 2" item is not highlighted correctly. This bug can only be reproduced locally. You cannot reproduce it on the CodePen because CodePen does not allow you to refresh the page on a certain URL.

[yuwu9145]

Thanks for reply. I will dig further

[KaelWD]

Broken in v2.5.7 by #13719, workaround is active-class="purple--text"

@yuwu9145 You shouldn't use v-list-item-group with links.

[yuwu9145]

Broken by #13719

@yuwu9145 You shouldn't use v-list-item-group with links.

It shouldn't be broken by that pr because issue is caused by this.isActive in line 185 VListItem.ts is always false by running reproduction sample code because VTabs does not correctly set isActive state based on route

[KaelWD]

Router-link active doesn't set isActive, the color class was always applied then overridden by :not(.v-list-item--active)

[yuwu9145]

I might be on wrong direction, will check out more thoroughly tomorrow based on your hints