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.