Inconsistent Styling Selectors for Active Elements in tieredmenu when Customizing Themes

[Gykonik]

I've noticed a discrepancy in the CSS selectors for active elements within the tieredmenu component when using custom themes.

Steps to reproduce:

1. Configure a theme for tieredmenu.
2. Export the styles and compare the active element's CSS selectors.

Expected Behavior:
Using the default lara-light-blue theme as a reference, the selector should be:

.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content

Observed Behavior:
The exported styles, however, use:

.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link

This inconsistency causes the highlighting on tieredmenus not to work as intended when customizing and importing themes based on lara-light-blue.

It's worth noting that the default lara-light-blue theme that ships with PrimeNG handles this correctly. The discrepancy arises when exporting a configured theme (even though you don't need to change any of the config) and re-importing this theme into a project.

[cetincakiroglu]

Hi @Gykonik,

Thanks for reporting the issue! We'll discuss that with the team and decide what to do about it. For now, could you please provide some screenshots demonstrating the difference between the two themes so we can clearly see the issue.

[Gykonik]

Sure, the following example is from the Website

And this is the example taken from here. It's basically the same, except I've used a custom style. For the custom style, I directly exported Lara-Light from PrimeNGs Theme Designer without any modifications. The result is, that when you try to select items with the keyboard, they are not highlighted (even though I can properly tab, expand, collapse, etc.)

In the following image, the "File" is selected using the keyboard only, and no highlight is visible at all (unlike the example on the website where everything works as expected). So I'm pretty sure, the selectors are off in the "exported Theme".