p-dropdown: Overlay not visually responsive when using arrow keys to change focused option

[cmcgilloway-CODY]

Describe the bug

I am experiencing an inconsistent issue with the dropdown component and it visually updating the focused option in the open overlay. Specifically, it is occurring only when opening the dropdown via mouse click, and only for certain fields in my application. This is only a visual issue - I can confirm that the focusedOptionIndex is being updated in the background, but change detection is not firing to update the option focused on the screen.

Field opened via mouse click, then using up/down arrows to attempt to select a different option:

https://github.com/primefaces/primefaces/assets/125284614/1527b24a-cfea-480a-94d8-dcce33e85916

A different application field, navigated the exact same way (notice it working properly here):

https://github.com/primefaces/primefaces/assets/125284614/5f8b03cf-6d93-4864-b1fa-3c4ec8fb71e5

The field from the first video, but instead opened via tabbing to the field and hitting enter (visually responsive here):

https://github.com/primefaces/primefaces/assets/125284614/61a9434d-6848-4f7e-992a-2f49e73ac1d6

Environment

Angular 17.0.7, Typescript UI application Using 17.3.1 currently in the application, but tested with updating to 17.5.0 and can confirm the issue is still there.

Reproducer

No response

Angular version

17.0.7

PrimeNG version

17.5.0 (Originally seen in 17.3.1)

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

Hitting up/down arrows while in the overlay always causes the focused option to be updated visually.

[atamansv]

Consider this comment: https://github.com/primefaces/primeng/issues/14059#issuecomment-1805237757 So make sure https://github.com/primefaces/primeng-sass-theme is using the latest version.

Actually these styles are responsible for this problem: https://github.com/primefaces/primeng-sass-theme/blob/7da523a729efe6600d3943330b95f51cb352acaa/theme-base/components/input/_dropdown.scss#L102C1-L112C14 It all started with this commit: primefaces/primeng-sass-theme@570c823

[cetincakiroglu]

Hi,

Couldn't replicate the behavior with 17.6.0. https://stackblitz.com/edit/ktfsd8?file=src%2Fapp%2Fdemo%2Fdropdown-basic-demo.html

Could you please share a stackblitz example so we can identify the issue clearly?

[cetincakiroglu]

Updating the milestone as 17.8.0 until the stackblitz example arrives.

[cetincakiroglu]

Hi,

Closing the issue due to inactivity. Please open a new issue with the stackblitz example if the issue persists with the latest version.

[github-actions[bot]]

We're unable to replicate your issue, if you are able to create a reproducer by using PrimeNG Issue Template or add details please edit this issue. This issue will be closed if no activities in 20 days.