Autocomplete: Virtual Scroller incompatible with autoHighlight

[Syuks]

Describe the bug

If an Autocomplete component is using a virtual scroller, the autoHighlight option does not work. The first li item is no longer the overlayRef.current.firstChild.firstChild but the overlayRef.current.firstChild.firstChild.firstChild. Or the overlayRef should be replaced with the virtualScrollerRef. See: autoHighlight.

Also, when navigating through the dropdown with arrow keys, the container fails to scroll when the highlighted item is no longer in view. This issue has the same nature as the previous one, the scrollInView function uses overlayRef instead of virtualScrollerRef. Note that the whole onInputKeyDown function uses overlayRef. See: down arrow and up arrow

Reproducer

https://codesandbox.io/s/primereact-test-forked-poxorh?file=/src/index.js

PrimeReact version

8.1.0

React version

18.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. Create an Autocomplete component with autoHighlight and virtualScrollerOptions.

2. Make the dropdown appear.

3. See no highlight on first item.

4. Create an Autocomplete component with virtualScrollerOptions.

5. Make the dropdown appear.

6. Navigate the dropdown with up and down arrow keys.

7. See no scrolling of the container.

Expected behavior

I expect the autoHighlight option highlight the first item of an Autocomplete component that is using a virtual scroller container.

I expect the highlighted item to stay in view when navigating with the arrow keys the dropdown of an Autocomplete component using a virtual scroller.

[melloware]

@Syuks I fixed the autohighlight issue but the scrollintoView is a bigger issue because the VirtualScroller has its own scrollIntoView method etc. Its quite complex so do you mind opening another ticket just for the UP and DOWN keys with VirtualScroller? That way I can fix this autoHighlight ticket.