Component: p-treeSelect - Material Design theme does not highlight items

[critchie]

Describe the bug

When using the Material Design themes such as mdc-dark-indigo, the p-treeSelect does not highlight the item when arrowing up or down through the list. The Lara themes outline the items so you can see where you are in the list.

It could be related to the .p-tree .p-tree-container .p-treenode .p-treenode-content class in the Material Design theme having the transition set to none. The Lara theme has it set to transition: box-shadow 0.2s;

Environment

Windows 11
Brave Browser (latest)
Visual Studio Code (latest)

Reproducer

https://primeng.org/treeselect

Angular version

17.0.0

PrimeNG version

17.2.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.9.0

Browser(s)

Brave v1.61.109

Steps to reproduce the behavior

1. Visit https://primeng.org/treeselect.
2. Set the theme to Material using the theme selector.
3. Dropdown the Basic TreeSelect.
4. Use arrows to navigate the list.

Result: Items are not highlighted in any way to indicate where you are in the list.

Expected behavior

Some indication of the selected item like in the Lara theme.