primefaces
Select / MultiSelect: Focus-Indicator should only be visible when keyboard navigation is used (focusOnHover=false)
Describe the bug
The components Select and MultiSelect use a visual indicator connected to the p-focus class to mark the focused option. A visual focus indicator is usually necessary when the user uses the keyboard to interact with the component but not necessary when a pointing device is used.
Browsers have a heuristic to decide whether a visual focus indicator is necessary and support the CSS pseudo classes :focus und :focus-visible to allow for applying CSS styles base on this heuristic.
In my opinion the PrimeNG components that have their own focus management should mimic this behavior and show the visual focus indicators only when they are helpful for the user, e.g. the user interacts with the component using the keyboard.
Pull Request Link
No response
Reason for not contributing a PR
- [ ] Lack of time
- [x] Unsure how to implement the fix/feature
- [ ] Difficulty understanding the codebase
- [ ] Other
Other Reason
No response
Reproducer
https://primeng.org/select
Environment
n/a
Angular version
19
PrimeNG version
v19
Node version
No response
Browser(s)
No response
Steps to reproduce the behavior
- go to https://primeng.org/select#basic
- select "Rome" using the mouse
- open the dropdown using the mouse --> "Rome" has a visual focus indicator
Expected behavior
- go to https://primeng.org/select#basic
- select "Rome" using the mouse
- open the dropdown using the mouse --> "Rome" doesn't have a visual focus indicator
Not sure if I understand the problem. You describe the selected state of an item, it's pretty normal to keep it highlighted.
I just entered a related issue here: https://github.com/primefaces/primeng/issues/18468
