Virtual Scroll Jumping Backwards

[dsgnow]

Describe the bug

Discussed in https://github.com/orgs/primefaces/discussions/353
Originally posted by msixfour October 31, 2023
@cetincakiroglu
if we have a textarea next to a dropdown and pass [autoresize]=true to it, the virtual scroll doesn't work correctly.

Code to reproduce:

<div class="card flex justify-content-center">
  <textarea pInputTextarea rows="1" [autoResize]="true"></textarea>
  <p-dropdown
    [options]="items"
    [(ngModel)]="selectedItem"
    placeholder="Select Item"
    [virtualScroll]="true"
    [virtualScrollItemSize]="38"
  ></p-dropdown>
</div>

constructor() {
    this.items = [];
    for (let i = 0; i < 50; i++) {
      this.items.push({ label: 'Item ' + i, value: 'Item ' + i });
    }
  }

Environment

Prime 17

Reproducer

https://codesandbox.io/s/primeng-dropdown-virtualscroll-demo-forked-8tn6m7?file=/src/app/demo/dropdown-virtualscroll-demo.html

Angular version

17.0.5

PrimeNG version

17.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.17.1

Browser(s)

chrome

Steps to reproduce the behavior

Add virtual scroll with fewer elements (50), next to it add textarea with [autoResize]="true". When scrolling down the scroll will jump.

Expected behavior

Scroll should move the elements smoothly.

[avytak]

I have the same issue for v16.5.1

[ThoSap]

@cetincakiroglu

[cetincakiroglu]

Hi all,

Could you please try after 17.6.0 release and let me know if the issue persist, I couldn't replicate the issue after the fix 652df0c

[isuruRSSL]

Hi, If you are still having this issue , try using appropriate value to match your dropdown element height to [virtualScrollItemSize]="xx",

I had the same issue when I was using 40 but when I checked the dropdown items had an height of 49px.
Using 50 solved the issue for me.