Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

p-table triggers lazy loading event twice #16182

Closed
aabruc opened this issue Aug 7, 2024 · 9 comments · Fixed by #16235 · 4 remaining pull requests
Closed

p-table triggers lazy loading event twice #16182

aabruc opened this issue Aug 7, 2024 · 9 comments · Fixed by #16235 · 4 remaining pull requests
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@aabruc
Copy link

aabruc commented Aug 7, 2024

Describe the bug

My table definition looks like this:

<p-table dataKey="id" [value]="items" 
    [paginator]="true" [rowsPerPageOptions]="[10,20,30,100,1000,10000]"
    [rows]="20" [alwaysShowPaginator]="false" paginatorDropdownAppendTo="body"
    [(selection)]="selectedItems" selectionMode="multiple" [metaKeySelection]="true"
    (onRowSelect)="rowSelect()" (onRowUnselect)="rowUnselect()"
    [lazy]="true" [showLoader]="true" [filters]="filters" (onFilter)="selectedItems = []"
    [rowHover]="true" responsiveLayout="scroll">

We're faced with the issue that the combination of column filter and sorting triggers the lazy loading twice.
Sorting and then column filter works fine, sorting without column filter also.
As soon as there is a column filter in the LazyLoadingEvent, a sorting triggers twice, and therefore we have two backend calls immediately after each other.

{first: 0, rows: 20, sortField: "changeDate", sortOrder: 1,…}
	filters: {name: {value: ["abc"], matchMode: "in"}}
	first: 0
	globalFilter: null
	rows: 20
	sortField: "changeDate"
	sortOrder: 1

I found a similar ticket that contains almost the same issue with PrimeNg version 14 from February 23, still open:
#12595

Environment

Windows 11 Enterprise

Reproducer

No response

Angular version

17.3.12

PrimeNG version

17.18.6

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.11.1

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

No response

@aabruc aabruc added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Aug 7, 2024
@aabruc aabruc changed the title p-table triggers lazyLoading event twice p-table triggers lazy loading event twice Aug 7, 2024
@mnhock
Copy link

mnhock commented Aug 7, 2024

Are there any news on this ticket?

@mehmetcetin01140
Copy link
Contributor

Hi, if you are still experiencing the issue with version 17.18.7, could you create a StackBlitz example?

@SaajRP
Copy link

SaajRP commented Aug 9, 2024

@mehmetcetin01140

I have been able to replicate this on PrimeNg 17.18.7. Look at the console log whenever you sort or filter a table column, it logs 2 lazy load events, when it should only log 1

https://stackblitz.com/edit/oetsny-rdsoxe?file=src%2Fapp%2Fdemo%2Ftable-virtual-scroll-lazy-demo.ts

@aabruc
Copy link
Author

aabruc commented Aug 12, 2024

@SaajRP,
Hi and thank you! Unfortunately, in your demo even the first load runs twice. This is not the case in any of my programs.

In the meantime, I have also created a demo. Here you can see that only one lazy load event is called - in any case, even if filtering and then sorting are performed first. It's very simple, but I cannot see what difference to my (admittedly more complex program with the call to the backend) causes this double lazy loading.

I use PrimeNg 18 and Angular 18 and dynamic columns.
https://stackblitz.com/edit/mkvney-yv1qdi

Could you please check, if my demo is meaningful enough for this test and what the difference is to your program, @mehmetcetin01140, @SaajRP? When you have the same issue it must be a combination of p-table settings that leads to the double lazy loading. In the meantime, I will carry out this comparison with my program and let you know if I have any results.

Thank you and kind regards
Andrea.

@SaajRP
Copy link

SaajRP commented Aug 12, 2024

@aabruc

On your StackBlitz instance, I set the customSort property to true on p-table (as I assume sorting will be handled by your API instead of the client), now whenever I sort, it logs the lazy load event twice

@ahaller-billtrust
Copy link

ahaller-billtrust commented Aug 12, 2024

I'm experiencing the same issue. Setting customSort property to true on p-table triggers (onLazyLoad) twice.
I also notice that the second call to onLazyLoad has incorrect pagination params if we are in a different page than the first one (first property of the lazy load event).
image

Tried with primeng@17.18.8 and the bug is still there

Forked StackBlitz: https://stackblitz.com/edit/mkvney-jrqaze?file=src%2Fapp%2Fdemo%2Ftable-multiple-selection-demo.html

@mehmetcetin01140 mehmetcetin01140 added this to the 17.18.9 milestone Aug 13, 2024
@mehmetcetin01140 mehmetcetin01140 added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Aug 13, 2024
@aabruc
Copy link
Author

aabruc commented Aug 13, 2024

Hi @ahaller-billtrust,
You are right, this setting triggers lazy loading twice. Unfortunately, my table does not have this setting and if I explicitly set [customSort]="false", it still does not help. But I guess you're on the right way, It could be a second call in the sortSingle() method by mistake.

@aabruc
Copy link
Author

aabruc commented Aug 15, 2024

Tested in my program with PrimeNg 17.18.8 and now it works well.
Thank you all for the cooperation!

@SaajRP
Copy link

SaajRP commented Aug 15, 2024

@mehmetcetin01140 , I've updated my Stackblitz instance to PrimeNg 17.18.9 (https://stackblitz.com/edit/oetsny-rdsoxe?file=src%2Fapp%2Fdemo%2Ftable-virtual-scroll-lazy-demo.ts,package.json), this is still an issue. In the console, it continues to log 2 events whenever the user has entered a new value into a given filter

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment