PrimeNG dropdown not properly highlighting selected items when appendTo="body"

[rosenthalj]

Describe the bug

When a PrimeNG dropdown is defined with appendTo="body" the selected items are not highlighted properly in the "overlay" list of items.

This bug was introduced in v14.2.0

The following movie shows a PrimeNG dropdown working properly and corresponds to a PrimeNG dropdown with appendTo not set:

working3.mov

The following movie shows a PrimeNG dropdown not working properly and corresponds to a PrimeNG dropdown with appendTo="body":

notWorking3.mov

After examining the dropdown source code I was able to locally modify dropdown.ts and fix this bug with the following changes:

diff dropdown.ts.updated dropdown.ts.orig 
737c737
<             let selectedItem = DomHandler.findSingle(this.overlayViewChild.overlayViewChild.nativeElement, 'li.p-highlight');
---
>             let selectedItem = DomHandler.findSingle(this.overlayViewChild.el.nativeElement, 'li.p-highlight');
739c739
<                 DomHandler.scrollInView(this.itemsWrapper, selectedItem);
---
>                 DomHandler.scrollInView(this.itemsWrapper, DomHandler.findSingle(this.overlayViewChild.el.nativeElement, 'li.p-highlight'));
841c841
<             this.itemsWrapper = DomHandler.findSingle(this.overlayViewChild.overlayViewChild.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-dropdown-items-wrapper');
---
>             this.itemsWrapper = DomHandler.findSingle(this.overlayViewChild.el.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-dropdown-items-wrapper');

Note: I only verified the proposed fix worked on my simple case.

Environment

Mac OS and Windows 10

Reproducer

https://github-xa3pgb.stackblitz.io

Angular version

14.x

PrimeNG version

14.2.x

Build / Runtime

Angular CLI App

Language

ALL

Node version (for AoT issues node --version)

14+

Browser(s)

All

Steps to reproduce the behavior

1. Run the reproducer: https://github-xa3pgb.stackblitz.io
2. Click on the Working dropdown
   2.1 Verify that the "hhhh" item is highlighted and visible
3. Use your key board up/down keys to navigate the dropdown's item list
   3.1 Verify that as you select an item, it is highlighted and is visible
4. Click on the Not Working dropdown
   4.1 Verify that the "HHHH" item is not highlighted and not visible
5. Use your key board up/down keys to navigate the dropdown's item list
   5.1 Verify that as you select an item, only Items AAAA-EEEE are highlighted and are visible

Expected behavior

The navigation of items in a dropdown list with appendTo="body" should work the same as when appendTo is not defined

[djpretzel]

Just chiming in - we are currently experiencing this issue and it's preventing us from moving forward with our upgrade/migration to Angular 14 & PrimeNG 14.

[djpretzel]

@cetincakiroglu does marking this as 15.Future mean it won't get fixed for the 14.X branch?