primeng icon indicating copy to clipboard operation
primeng copied to clipboard

Table: Scroller is broken when scrollHeight is flex

Open sotjdisc opened this issue 1 year ago • 6 comments

Describe the bug

The scrolling experience is broken. Scroll bars are unusable and you cannot scroll to the end of the table with them.

Environment

Chrome: latest

Reproducer

https://stackblitz.com/edit/es8wpw-mesec1

Angular version

17.3.12

PrimeNG version

17.18.9

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

whatever stackblitz is using now

Browser(s)

No response

Steps to reproduce the behavior

  1. Open stackblitz example and scroll down with mouse wheel
  2. Observe scrollbars on the right while scrolling

Expected behavior

  1. Same as with primeng version prior to 17.18.8

sotjdisc avatar Aug 16 '24 06:08 sotjdisc

I can confirm that it's completely broken on PrimeNG 17.8.9 and has made virtual scrolling tables, completely unusable. Once, I scroll past the first "page", all entries after it are stuck in a loading state, and the scroll bar jumps around. Changing the virtualScrollItemSize doesn't seem to make a difference, and is only resolved when setting the scrollHeight to a fixed number of pixels

https://stackblitz.com/edit/oetsny-rdsoxe?file=src%2Fapp%2Fdemo%2Ftable-virtual-scroll-lazy-demo.ts

On PrimeNg 17.8.8, it was also broken, with the bugs stated below.

(https://github.com/primefaces/primeng/issues/16185) If I set the virtualScrollItemSize to be less than 50, when I to scrolled to the very bottom of the virtual scrolling, lazy loaded table, I was unable to see the very last few rows in the table, and scrollbar would jump up when trying to scroll to them

(https://github.com/primefaces/primeng/issues/13370) If the table has the rows attribute set, when I scroll from the top to the bottom of the table (so I effectively skipped some "pages" in the middle), then scroll up to the middle of table, the table would be stuck in a loading state - this has been been a bug for over a year, since at least PrimeNG 15.4.1

I believe the virtual scrolling implementation needs to be be re-evaluated as it has a lot of different bugs

SaajRP avatar Aug 16 '24 07:08 SaajRP

It is not related to changes in virtualScrollItemSize . In the example, i am using the default sizes.

sotjdisc avatar Aug 16 '24 07:08 sotjdisc

@sotjdisc, I understand, this bug happens when setting the scrollHeight to 'flex'. I was adjusting the virtualScrollItemSize, to see if there was any relation to the existing bug https://github.com/primefaces/primeng/issues/16185

SaajRP avatar Aug 16 '24 07:08 SaajRP

bump, we're experiencing the same issue

ZeroZeroOne-dev avatar Aug 20 '24 13:08 ZeroZeroOne-dev

Yep most tables using scrollHeight="flex" + virtualScroll="true" are broken. Also the table header disappears halfway when scrolling to 50% of the table.

mkutowski avatar Aug 29 '24 13:08 mkutowski

i want to blame this commit - https://github.com/primefaces/primeng/commit/e7b611ba4c554aa4beeebe7a8a1ac8d74534507e

i believe this PR will fix it - please merge - as all flexheight tables/trees are broken atm.

Dedme avatar Sep 05 '24 12:09 Dedme

This issue exists in v19.0.5

Seems that this commit is missing: https://github.com/primefaces/primeng/pull/16273/files#diff-c6cd7998571020577d558a44a0cc68561866f97f2b68ed9a97926e4e102084ef

pmikel01 avatar Jan 29 '25 17:01 pmikel01

@mehmetcetin01140 Can we also port this to v19 ?

pmikel01 avatar Jan 30 '25 09:01 pmikel01

I see it's working now with 19.1.0 - thank you!

utillity avatar Apr 28 '25 11:04 utillity

So, it seems like this is broken again in 20.2.0.

This issue exists in v19.0.5

Seems that this commit is missing: https://github.com/primefaces/primeng/pull/16273/files#diff-c6cd7998571020577d558a44a0cc68561866f97f2b68ed9a97926e4e102084ef

This commit seems to be missing again: https://github.com/primefaces/primeng/blob/5c36dd9ea4b45e150bafdda636e0dd6980ff3fd6/packages/primeng/src/scroller/scroller.ts#L938-L954

gianluca-moro avatar Sep 29 '25 14:09 gianluca-moro