primefaces / primeng

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

Lazy Table with Virtual Scroll and scrollHeight flex hides content and jumps to top on resize with Firefox #16747

Open jase88 opened 1 week ago

jase88 commented 1 week ago

Describe the bug

If using a lazy table with virtual scrolling and scrollHeight=flex

  <p-table
    ...
    [scrollable]="true"
    columnResizeMode="expand"
    scrollHeight="flex"
    [virtualScroll]="true"
    [virtualScrollOptions]="{ showLoader: false, showSpacer: false }"
    [virtualScrollDelay]="0"
    [resetPageOnSort]="false"
    [lazy]="true"
    [tableStyle]="{ 'table-layout': 'fixed' }"
  >

on Firefox the content is hidden and the scrolling jumps to the top if resizing. This only occurs if scrolling a bit within the table. If kept in initial scrolling state resizing works fine.

https://github.com/user-attachments/assets/caa92de4-186b-4e17-a038-bb054a3b5780

After Scrolling again the content reappears.

Environment

MacOS 15.1 Firefox 132.0.2

Reproducer

https://github.com/jase88/primeng-table-scrollheight-flex-firefox

Angular version

18.2.0

PrimeNG version

17.18.12

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

22.8.0

Browser(s)

Firefox 132.0.2

Steps to reproduce the behavior

  1. Checkout https://github.com/jase88/primeng-table-scrollheight-flex-firefox
  2. Run npm install && npm run start
  3. Open localhost:4200 on Firefox
  4. Scroll table a bit
  5. Resize table

Expected behavior

mertsincan commented 6 days ago

Hi,

Does it work with Chrome or others? and, could you please try it with v18?

jase88 commented 6 days ago

It does work fine on Chrome/Chromium based browsers and Safari. As far as I can see after initial debugging, no scroll event is emitted in Firefox (Scroller component), whereas this is the case with the other browsers.

I will test it with PrimeNG 18 RC1 and report soon

jase88 commented 6 days ago

@mertsincan There seems to be further errors with 18rc1 - I migrated my reproduction example on this branch: https://github.com/jase88/primeng-table-scrollheight-flex-firefox/tree/18.0.0-rc.1

If [virtualScroll]=true is set, no items are displayed at all within the tbody. If setting [virtualScroll]=false the content is displayed, but a NG0100: ExpressionChangedAfterItHasBeenCheckedError error occurs.

Should I create two new bug issues for 18rc1?