Virtual Scroll Jumping Backwards

[msixfour]

Hi there!

Trying to determine where this issue might be coming from. Been running into an issue with virtual scroll on multiple primeng components (p-table and p-multiselect) where the scroll viewport keeps jumping back several rows upon a certain point in scrolling. It doesn't seem to matter if lazy loading is enabled or disabled. If I physically grab the scroll indicator, I can drag it past the threshold where it would normally jump backwards.

I'm setting the virtual scroll height to be identical to the row heights in the table/multiselect.
Been looking around at the styles are applied and can't see anything out of the ordinary.
Running on latest version of primeng and angular (after seeing the issue exist on older versions of both).

If anyone has run into this behavior, and get help point me in the right direction of where to look next, I would greatly appreciate it. Thank you in advance!

[cetincakiroglu]

Hi,

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

[nwkyom]

I use the current latest version (17.7.0) and I still have this scrolling issue (jumping backwards) when the data exceeds a certain threshold. I'm not using the lazy loading feature. As suggested, I tried to add [rowTrackBy]="trackByFunction" but it didn't work either.

[nwkyom]

I forked the previous stackblitz link: https://stackblitz.com/edit/pvudma-phandv

I upgraded the Angular and PrimeNG libraries.
I removed the "rowTrackBy" property by default.
I enabled the 2 tabs with exactly the same table.

As you can observe:

• At startup, the scroll on the "tab1" is erratic (jumping backwards, more visible if you scroll slowly)
• Then go the "tab2", it is working perfectly fine
• Go back to the "tab1", now it is working as well

[Max0nyshchenko]

@cetincakiroglu Hi, here is my demo (slowly scroll down in a p-scroller component to reproduce the bug) https://stackblitz.com/edit/pvudma-fer1u1?file=src%2Fapp%2Fdemo%2Fvirtual-scroll-issue-demo.html
It uses primeng@17.18.2, the issue is present when there is a p-tabMenu on the page. I think the issue appeared in primeng@17.15.0 as I tested with primeng@17.12.0 and everything was working there.

Here is the working demo with primeng@17.12.0 https://stackblitz.com/edit/pvudma-hh5j6j?file=package.json

[dkachanov-scm]

Our project also blocked due to this issue!

[davidwwu]

@Max0nyshchenko I managed to fix it by adding trackBy: https://stackblitz.com/edit/pvudma-mem4lg?file=src%2Fapp%2Fdemo%2Fvirtual-scroll-issue-demo.html

[dsgnow]

I have the same problem. It seems that if we have a textarea next to a dropdown and pass [autoresize]=true to it, the scroll doesn't work correctly. Here's an example on codesandbox. https://codesandbox.io/s/primeng-dropdown-virtualscroll-demo-forked-8zpqhp?file=/src/app/demo/dropdown-virtualscroll-demo.html

[erber014]

I can confirm that I have a problem with this also. Created an issue here: primefaces/primeng#14003

[tim-wilkins]

This has been an issue since the new Scroller component was introduced, although I've not worked out under what conditions it occurs. You can work-around this by using the append only option, which would help if initial loading is the issue, but not if you've large datasets etc.

[cetincakiroglu]

Hi,

About the virtualScroll in dropdown, we've fixed this issue and it doesn't exist in the latest version.

[cetincakiroglu]

Your example does not start btw, please provide a working example

[dsgnow]

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

[cetincakiroglu]

@dsgnow

Your example crashes again...

[dsgnow]

I opened the link now and it works, so I don't know what the problem could be.

Here is code to reproduce also:

<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>

Just set the virtual scroll to a smaller value, in the example "38" and add next to the textarea with [autoResize]="true"

[cetincakiroglu]

I've tried 2 times again and it crashed. I don't know maybe something related with codesandbox. Trying to reproduce by your code :)

[tim-wilkins]

Does the fix extend to other uses of VirtualScroller/Scroller? It still seems a problem in 16.8.

[cetincakiroglu]

The fix is released with 17.3x it's not available for 16.8 unfortunately

[dsgnow]

Is the described issue scheduled for a fix? I am checking on version 17.0.0-rc-1 and still this problem occurs.

[cetincakiroglu]

Could you please provide a working example so we can identify the issue clearly?

[dsgnow]

https://github.com/orgs/primefaces/discussions/353#discussioncomment-7785221

[cetincakiroglu]

Hi,

Could you please check the example here, I couldn't replicate the jumping behavior https://stackblitz.com/edit/xbtezq?file=src%2Fapp%2Fdemo%2Fdropdown-virtualscroll-demo.html

[cetincakiroglu]

Hi,

I've managed to open the example and I can see that there is a bug with dropdown virtualScroll in the used version. Probably we've fixed the issue in 17.0.0-beta.1 or 17.0.0-rc.1, I can't reproduce the issue in v17,

[dsgnow]

In your example just change

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

to

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

does not work with fewer elements

[cetincakiroglu]

I got your point now, could you please create an issue for that in the repo and tag me so we can address the issue in future releases?

[dsgnow]

Sure ;)

link to issue: primefaces/primeng#14298

[dsgnow]

Are there plans to fix this issue?

[cetincakiroglu]

Hi,

We're having difficulty finding the root cause of the issue. It's a strange behavior that occurs only if autoSize input of textarea is used. It's not even directly related to the virtual scroll.

[eblanford]

After upgrading to v14 I also have had this issue on all of my tables that use virtual scroll and some of my dropdowns and multiselects as well - my project has very large data sets and my tables have 120+ columns, so virtual scroll is a must. I'll have to try and reproduce it on a personal repo.

I've gotten around it on the table by using the rowTrackBy and returning a trackByFunction that returns index. For some reason returning object.rowId does not work, only index. Only catch is I'm migrating to version 16 and this does not work with editable cells, there seems to be a stack overflow on scroll caused by the editable cell - still looking into that.

On the multiselect, I was able to get rid of the issue by adding an ngRowTrackBy function to the p-multiselect item ngForOf loop and do the same thing as I do on tables, this is the only thing I've found that fixes the issue. I had to copy the primeng component to add that one line so it'd be nice if that was added as an input like it is on tables!

[tim-wilkins]

Using a track-by function returning the index does seem to solve most of the problems of this weird scrolling, although in one case with a table I've hit a strange "bouncing off the bottom of the table" effect (i.e. scroll to bottom and it scrolls back up a bit). This is using the 17.3.3.

[eblanford]

I have only seen this behavior when my row height is variable or if my row height does not match the virtualScrollItemSize I defined. Can you verify that this is not the case?

[tim-wilkins]

I've not been using variable height rows and I've made sure that the virtualScrollItemSize is correct when using the scroller by itself. For tables I found a slight discrepancy, 27 rather than 25 pixels, but correcting this didn't make any difference. I'm referring to the general jumping around rather than the bouncing off the bottom. As regards the bouncing off the bottom, I examined the affected code more thoroughly and it didn't include the virtualScrollItemSize at all, so adding that (together with the row track by) means it now works fine. Thanks for drawing my attention to that (I probably would have got back to it eventually).

[cetincakiroglu]

Hi all,

Could you please try after the 17.6.0 release and let me know if the issue persists, I couldn't replicate the issue after the fix primefaces/primeng@652df0c

[tim-wilkins]

I still get the problem (jumping backward) using a Scroller directly and a table with virtual scrolling - I still need to add the track-by attribute/function which does fix it. This is using 17.6.0.

[cetincakiroglu]

Could you please share your use case with a stackblitz example so we can also see your case and investigate what's wrong?

[tim-wilkins]

It's part of a pretty large application so I'm not sure if I can make an isolated example.

[tim-wilkins]

I've tried to produce a simple application to show the problem, but it all works properly. I'm not able to send you the application showing the problem because there are a few linked applications and a database etc. If I get any further I'll get back to you.

[dsgnow]

I don't know if it happened in the latest version but also p-TabMenu if it is next to p-dropdown with lazy load (up to 200 items) makes it impossible to scroll. I would post an example but the link from the documentation to p-tabMenu doesn't work (stackBlitz builds, but this component doesn't display). After more investigation, I was able to determine that the p-highlight class is responsible for this, which gets the clicked item in p-tabMenu and this messes up the scroll in the dropdown. When I remove p-highlight class everything works fine.
“.p-tabmenu .p-tabmenu-nav-content li.p-highlight”

[RafalN8]

I don't know if it happened in the latest version but also p-TabMenu if it is next to p-dropdown with lazy load (up to 200 items) makes it impossible to scroll. I would post an example but the link from the documentation to p-tabMenu doesn't work (stackBlitz builds, but this component doesn't display). After more investigation, I was able to determine that the p-highlight class is responsible for this, which gets the clicked item in p-tabMenu and this messes up the scroll in the dropdown. When I remove p-highlight class everything works fine. “.p-tabmenu .p-tabmenu-nav-content li.p-highlight”

After reading this message, removing the usage of tabMenu for a while and checking the differences in between versions 17.13 and 17.14 I found out that this change might cause the issue:
primefaces/primeng#15269
I "reverted" the change done under this fix by overriding the script and spotted "jumping" issue no more.

[FMorrison87]

For people having this issue and looking for an answer. I don't have a fix, but I wanted to let people know what makes it happen 100% of the time. I am working on an application on Angular 17.0.4 and primeNG 17.16.0. I cannot post a Stackblitz (I know I will be asked). Using p-table, not using anything lazy, but using virtualScroll and virtualScrollItemSize set through a getter. When the table is nested within p-tabMenu or p-tabView, and once the table hits a threshold of items for the virtualization to kick-in (this is ~34 items for my viewport height) the rubber-banding scroll effect where the table loops continuously happens every time at a slow scroll speed (about slow enough to visually scan table items). I had a duplicate table that was not nested in tabs in another part of the app with the exact same structure that does not have this issue with virtual scroll. I even swapped it into the spot with the tabs, and then it had the problem. So it looks like this is a problem when using virtual scroll on a table nested within tabs.

@nwkyom actually posted a stackblitz that shows the issue exactly within tabs, and even how swapping tabs, scrolling, and then swapping back to the original tab 'fixes' the issue. PrimeFaces folks, hopefully that is something to go on when looking for the issue. For my case, I am removing virtual scroll from production in all instances where it is nested in tabs, which is not ideal as I don't know how much data is going to hit these tables, but they can't be read by the user when the rubber-banding effect happens.

[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 with p-dropdown when I was using 40 but when I checked the dropdown items had an height of 49px.
Using 50 solved the issue for me.

[CristinaDarie]

I still have that issue in the version 17.18.1 with the hight correctly set. It's happening if slowly scrolling in a dropdown element with virtual scroll set. If the scroll happens faster the items are not visible so it's not actually an option for the user. Please fix this scenario as well.

Edit: also it was happening in 17.16x

[Max0nyshchenko]

In my case the issue has nothing to do with virtualScrollItemSize, these 2 demos are showing just that:
demo with the bug in current latest primeng@17.18.2 https://stackblitz.com/edit/pvudma-fer1u1?file=src%2Fapp%2Fdemo%2Fvirtual-scroll-issue-demo.html
demo without the bug with primeng@17.12.0 https://stackblitz.com/edit/pvudma-hh5j6j?file=package.json

As I said earlier in my case changes that introduced the bug were released with primeng@17.15.0

[danpercic86]

I had the same issue and adjusting the virtualScrollItemSize to the correct value solved the problem

[dsgnow]

Same with p-dropdown with virtualscroll + tabMenu https://stackblitz.com/edit/pvudma-vnnweg?file=src%2Fapp%2Fdemo%2Fvirtual-scroll-issue-demo.html

[ShevchenkoT]

Try this https://stackoverflow.com/a/78763266/19130488

[Kropotov-Vadim]

It works

[davidwwu]

Works for my p-table component with primeng v15.4.1. My itemSize was set correctly but didn't have the trackBy function. Adding it solved the issue! I think the documentation needs to be updated to require the trackBy function.

[mhazak]

Are there any updates for virtualScroll bug in the p-dropdown?

[Avcharov]

Hello, i have the same issue with table "jumping" after scroll using virtualScroll for p-table.
I tried for 3 versions and it was not fixed in any of them: 16.9.0; 17.12.0 and 17.18.9.

[bennettpeter]

I had this problem with large tables. I have fixed it by doing the following:

Make sure all rows have the same height. Some rows with long text were wrapping the text and causing the row height to be more.

CSS:

.mycell {
    position: relative;
}

.mytext {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Table:

<p-table .... [virtualScrollItemSize]="42" ...
<tr style="height: 42px">
...
<td class="p-1 overflow-hidden">
    <div class="mycell">
        <div class="mytext">{{program.SubTitle}}</div>
    </div>
</td>

Then run your application and examine your layout in the browser debug option (ctrl-shift-i). Check that the height of each row is 42 pixels. Some themes cause the height to be more. Avoid thos themes. Make sure the nested div containers are used on every cell with contents that could overflow onto more than 1 line.

With these changes scrolling is perfect, no more jumping around and no more losing the last rows in the table.

[voidoperator]

Almost a year later, can confirm this issue is still very much persistent on version 17.18.11.

Using a p-dropdown inside of a p-tabMenu. Strangest part is that scrolling UP works, scrolling down is what makes it erratic. It scrolls upward instead at an incredible speed.

[rmorris-gnrc]

I'm having the same issue. But it seems that the p-dropdown doesn't even need to be inside of the p-tabMenu. Just having the p-dropdown inside of the same component as a p-tabMenu seems to cause the issue. We are seeing this issue on 17.18.11. I am not able to replicate this issue on our previous version - 16.9.1.

[harryKont]

We are also facing the same issue, when using p-table with virtual scrolling. It seems to be more prominent if the user uses infinite scroll to quickly jump to the bottom of the table.

[davidwwu]

I'm using p-table component in PrimeNg v.15.4.1 and the issue happens when the table size is large (our table goes over 20k rows but I think it started happening with 1k+ rows). My virtualScrollItemSize is set correctly but didn't have the rowTrackBy property set. Setting it according to https://github.com/orgs/primefaces/discussions/353#discussioncomment-10081887 works for me.

Here's a working example: https://stackblitz.com/edit/pvudma-mem4lg?file=src%2Fapp%2Fdemo%2Fvirtual-scroll-issue-demo.html Try taking out the trackBy to see the original issue.

[gsUp2000]

I am using the p-table in my application and I am running into the same issue of the scrollBar jumping backwards. I am also using the lazyLoadEvent to call on more data but when I set the rowTrackBy function I am running into an error that the lazyLoadEvent is not triggered. And many a times the scroller would be at the end of data. Is anyone else facing this issue. And if yes how to solve it ?
And why is the lazyLoadEvent is triggered at the generation of table?
PrimeNg version: 17.18.11
Angular version: 18.2.0