Component: Autocomplete

[jafidelis]

Describe the bug

Autocomplete, footer is not staying in place waiting, staying on top of the first item in the panel list.

Environment

win-11 - WSL

Reproducer

No response

Angular version

17.0.5

PrimeNG version

17.6.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.17.1

Browser(s)

Chrome 121

Steps to reproduce the behavior

Add <ng-template pTemplate="footer">content</ng-template>, in autocomplete component.

Expected behavior

Pin to the end of the results list

[cetincakiroglu]

Hi,

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

[jafidelis]

https://stackblitz.com/edit/bqllri?file=src%2Fapp%2Fdemo%2Fautocomplete-virtual-scroll-demo.html,package.json

[cetincakiroglu]

Hi,

Since you're using templating, you need to style elements inside the template option. We cannot interfere the styling of user templates. The reason why it stays on top is because the suggestions array empty and there isn't a CSS rule doing it. Here is the refactored version of your example: https://stackblitz.com/edit/bqllri-x2bzc2?file=src%2Fapp%2Fdemo%2Fautocomplete-virtual-scroll-demo.html,src%2Fapp%2Fdemo%2Fautocomplete-virtual-scroll-demo.ts

Closing the issue since it should be styled by the user.

[jafidelis]

Until version 16 when we used pTemplate="footer", the template was positioned by default, pined, below the scroll bar, in the lazyLoadgin option. Just like the pTemplate="header" is pined above the scroll bar.

pTemplate="footer" (lazyLoading option)

pTemplate="header"

https://stackblitz.com/edit/bqllri?file=src%2Fapp%2Fdemo%2Fautocomplete-virtual-scroll-demo.html,package.json

Version 16.2.0


https://stackblitz.com/edit/fbmrql?file=src%2Fapp%2Fdemo%2Fautocomplete-virtual-scroll-demo.html

[cetincakiroglu]

Hi @jafidelis ,

Could you please update the links, they are broken and lead to the github/issues