primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.42k stars 4.59k forks source link

AutoComplete: Suggestions list display is broken after scroll when virtual scroll enabled #13655

Open Ioana-Drimbarean opened 1 year ago

Ioana-Drimbarean commented 1 year ago

Describe the bug

Dear team,

I have encountered an issue while testing the autocomplete component with virtual scroll enabled. I think there is something wrong with the scrolling reset and the scroll container calculation. I suggest you use a more complex list of items while fixing the bug and not just a list of prefixed "item ". Please check the steps to reproduce section for more details.

Environment

Prime NG demo component: https://primeng.org/autocomplete#virtualscroll PrimeNG version: v16.3.1 (from your own demo page) or 16.0.2 (my locale environment version) Angular version: 16

Reproducer

No response

Angular version

16.1.0

PrimeNG version

16.0.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v19.7.0

Browser(s)

Chrome, FF

Steps to reproduce the behavior

CASE 1: broken display of suggestion list 1) Use Prime NG demo component: https://primeng.org/autocomplete#virtualscroll 2) Search after Item and then scroll down through the list of suggestions 3) Add 0 at the end after scrolling => the display is broken(you barely see the suggestion within the scrolling container) 4) Add 9 instead of 9, delete input and check different combinations => The display is broken sometimes. It helps scrolling through the list, in order to get back to the right behaviour. after_scroll_6 after_scroll_5 after_scroll_4 after_scroll_3 after_scroll_2

CASE 2: inconsistent scroll area size. 1) Use Prime NG demo component: https://primeng.org/autocomplete#virtualscroll (Please refresh the page, or open it in a new tab) 2) Search after Item 0 => The list of suggestions shows one item and empty space. 3) Delete 0 and then add it again => The list of suggestions shows one item and no empty space. item_0_first item_0_second_time

Expected behavior

The list of suggestions should be visible to the user and the scrolling area size for the suggestion list should be consistent.(recalculated after the number of results). Also, this workflow also should work when the showEmptyMessage option is enabled. Please contact me if you need more input.

andyg3 commented 11 months ago

I am facing the same issue, and the demo page is still broken.

imohammadali commented 4 months ago

I have the same issue, in the https://primeng.org/autocomplete we can see it's not working properly:

image