Replies: 15 comments 25 replies
-
Hi, Could you please share a stackblitz example so we can identify the issue clearly? |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Hi, About the virtualScroll in dropdown, we've fixed this issue and it doesn't exist in the latest version. |
Beta Was this translation helpful? Give feedback.
-
Does the fix extend to other uses of VirtualScroller/Scroller? It still seems a problem in 16.8. |
Beta Was this translation helpful? Give feedback.
-
Is the described issue scheduled for a fix? I am checking on version 17.0.0-rc-1 and still this problem occurs. |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
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, |
Beta Was this translation helpful? Give feedback.
-
Are there plans to fix this issue? |
Beta Was this translation helpful? Give feedback.
-
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! |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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!
Beta Was this translation helpful? Give feedback.
All reactions