You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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)
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)
@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.
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
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
The text was updated successfully, but these errors were encountered: