AutoComplete: space between overlay panel and the component

[pascualmj]

Describe the bug

When searching for an option, the overlay panel shows up on top of the autocomplete component (cause it has no space below to be placed), and that's fine, but when I continue typing, less options appear and the overlay panel sticks to the same top position value. So that generates an annoying space between the overlay panel and the autocomplete component.

Reproducer

No response

PrimeReact version

8.4.0

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. Go to https://www.primefaces.org/primereact/autocomplete/
2. Focus the AutoComplete component from the "Multiple" example.
3. Make sure that there's no space on the bottom to show the overlay panel.
4. Type "a" and wait for the panel to appear.
5. Type "f" and wait for the options to reload.
6. You should see a space between the overlay panel and the autocomplete component.

Expected behavior

There should be no space between the overlay panel and the autocomplete component. If the list of options is too large the user can get lost of where to see.

[melloware]

Assigning to @mertsincan this is a bug in the DomHandler.alignOverlay method.

[melloware]

Looks like PrimeVue handles this a little better: https://www.primefaces.org/primevue/autocomplete

[pascualmj]

Any updates regarding this issue? 😄

[melloware]

PrimeVue is doing this and it fixes it:
https://github.com/primefaces/primevue/blob/12f5dfd2c4456f0749c56fde20f7536cb0284f66/src/components/autocomplete/AutoComplete.vue#L337-L341