tabMenu breaks table virtual scroll calculations

[puschie286]

Describe the bug

When using tabMenu and a table with virtual scrolling, the scroll height (transform: translate3d(0px, 0px, 0px) on p-datatable-tbody p-scroller-content) is calculated wrong after update - causing the scrollbar to jump back up and make it impossible to scroll down.

tried to create an example in stackblitz but its far less problematic there then in our environment - so its might be related to some css constelation.
here gif with menu:

without menu:

our current workaround is to delay the tabMenu draw by @if statement and setTimeout( ..., 1 ) but we coud not figure out what tabMenu does to interfer the scroll calculation.

When looking at the html you see that the tbody (p-datatable-tbody p-scroller-content) get updated with the correct transform style first right before its reset to 0, 0, 0. (gif of triggering scroll update 2 times)

Environment

(insert by router-outlet)

Reproducer

https://stackblitz.com/edit/wgws6t-8kyucc

Angular version

17.3.7

PrimeNG version

17.16.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.12.2

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

No response

[adrian-czarnomski-engel]

We have pretty much the same issue, we have p-tabMenu and p-listbox with virtual scroll inside router-outlet. It doesn't work for any component with virtual scroll. All chromium based browsers and also firefox doesn't work, but we noticed that Safari has no problem with it.

Our configuration is:
Angular 17.3.0
PrimeNG: 17.16 (tested also 17.17)
Node 22.2.0
Browsers Chrome/Edge and Firefox (chromium based)

[adrian-czarnomski-engel]

@puschie286 Since the PrimeNG team haven't answered yet, I noticed, that if the wrap component of p-tabMenu has OnPush Strategy, it works as expected. Scrolling in virtual scroll causes refreshing p-tabMenu multiple times which leads to calling updateInkBar() method inside of p-tabMenu, which spams DomHandler. You can override the updateInkBar method to do nothing, or activate OnPush strategy. It helped us.

[puschie286]

@adrian-czarnomski-engel thanks for the tip but it doesnt seems to work for us - the tabMenu and the virtual scrolling component are in completely different angular components, both are OnPush so there seems to be some conflict in the intern calculations

[NynaPykulska]

I had this issue with virtual scroll in a table, until I found this thread 4029.
The class that they applied the style to is not in the table anymore, so instead I added it like this
.p-datatable { .p-datatable-tbody, .p-datatable-scroller-spacer { overflow-anchor: none; } }
I don't know what does the structure of the tab menu look like, so don't know if this will help, but maybe it can be a clue for you too.

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation and try the latest PrimeNG version(v19). If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,