primefaces / primeng

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

Table: Scroller is broken when scrollHeight is flex #16246

Open sotjdisc opened 1 month ago

sotjdisc commented 1 month ago

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
SaajRP commented 1 month ago

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

sotjdisc commented 1 month ago

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

SaajRP commented 1 month ago

@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

ZeroZeroOne-dev commented 3 weeks ago

bump, we're experiencing the same issue

mkutowski commented 2 weeks ago

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

Dedme commented 1 week ago

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.