search

primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.56k stars 4.61k forks source link

p-autocomplete, p-dropdown: Hover and select state have different colors #16203

Open jawad-jd-hs opened 3 months ago

jawad-jd-hs commented 3 months ago

Describe the bug

We observe an issue with the prime-ng dropdown/autocomplete component, we are experiencing two different focus states for both on hover and selected. We expect both to be the same as p-multiselect, which has the same hover and select colors. All screenshots that I have included use the same theme. p-multiselect: image

p-autocomplete Two different colors or focus states for hover and selected image

p-dropdown The same issue with the p-dropdown which has two different colors for the focus state on selected and hover image

Environment

I am just working on a simple project with Angular and prime-ng 17 versions without any other UI library or dependency.

Reproducer

No response

Angular version

17.0.0

PrimeNG version

17.18.7

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.1

Browser(s)

No response

Steps to reproduce the behavior

Anyone can observe this in the Prime-ng official documents: https://primeng.org/dropdown

Expected behavior

We expect that Hover and Select state colors should be the same as we observe in the multi-select component

rosenthalj commented 3 months ago

I believe that PrimeNG is working correctly for p-dropdown, p-autocomplete, and p-multiSelect.

For the p-dropdown and p-autcomplete, the "Blue" corresponds to what is currently selected.

p-multiSelect uses checkboxes to indicate which values are selected.

All three components have both a mouse hover indicator and a keyboard position indicator.

See video listed below where I first select using the keyboard and then I select using the mouse.

https://github.com/user-attachments/assets/107215ec-3d5a-4109-96ed-78cf9480a4c0