Primeng: p-table emits lazy load event twice when initializing and multiSortMeta is provided

[ctrl-brk]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting

Current behavior
When multiSortMeta property is set for a lazy p-table the table will emit onLazyLoad event 2 times during initialization. Once from ngOnInit method here https://github.com/primefaces/primeng/blob/2838bcc4e50fd581457c7fbee9edc6ed6219ec8d/src/app/components/table/table.ts#L330
and another one when assigning multiSortMeta here https://github.com/primefaces/primeng/blob/2838bcc4e50fd581457c7fbee9edc6ed6219ec8d/src/app/components/table/table.ts#L464 by calling sortMultiple without checking this.initialized like it does for single sort here https://github.com/primefaces/primeng/blob/2838bcc4e50fd581457c7fbee9edc6ed6219ec8d/src/app/components/table/table.ts#L439

Expected behavior
onLazyLoad should be emitted only once during initialization

[bossqone]

onLazyLoad is also triggered multiple times when sortField and sortMode are specified.
For example, I parse state of application from URL query parameters to variable state in component, because router is my single source of truth.

Component's template looks like this:

<p-table [value]="items"
         [rows]="state.pageSize"
         [first]="state.pageOffset"
         [sortMode]="'single'"
         [sortField]="state.sortField"
         [sortOrder]="state.sortOrder"
         [rowsPerPageOptions]="[10, 20, 50]"
         [paginator]="true"
         [lazy]="true"
         [totalRecords]="totalCount"
         [responsive]="true"
         (onLazyLoad)="onLazyLoad($event)"
         class="break-word table-columns-auto-width"
         [rowHover]="true">
.
.
.
</p-table>

Table has multiple sortable columns (e.g createdAt, updatedAt...).

On first load, state.sortField and state.sortOrder are null.
Then user clicks on column header to sort results by this column.
Click triggers sort() which triggers sortSingle() and therefore onLazyLoad.
What we do in onLazyLoad is simple redirect to same page, with updated query parameters.
New values from query parameters are set to state variable and this causes change of sortField and sortOrder inputs on TurboTable. These inputs are implemented as setters. Each of setters calls sortSingle() which triggers onLazyLoad.

So, sort triggered by user (click) results in 3 onLazyLoad events.
From my point of view, setters should call sortSingle() only if new value differs from internal sort field/order.. or even better, it shouldn't trigger events at all (for all inputs) in lazy mode.

I would say, that our usecase is typical for other developers which use redux/ngrx architecture as well.

[bossqone]

@cagataycivici what do you think?

[filip12345678910]

maybe it would be nice if it was repaired

[cagataycivici]

With 6.1.1, you can do [lazyLoadOnInit]="false" which will prevent the load at ngOnInit.

[ManihtraA]

Any way to trigger lazy load event before last row reached on scroll?

[exitlol]

Upon sorting a lazy loaded p-table it still emitts the event more than once. At least for me. But I am not using mutiSort

[asheikh-alivia]

[lazyLoadOnInit]="false" doesn't work. I am using version 6.1.6.

[Maheshkale447]

[lazyLoadOnInit]="false" doesn't work. I am using version 6.1.6.

its there in v9.1.0

[mfish0005]

@cagataycivici Is the [lazyLoadOnInit] property possible with the virtual scroller component? Because I'm having the same problem and it doesn't seem to be a known property of the virtual scroller

[chriswilley]

This issue was a real problem for me because the multiple lazy loading events meant multiple calls to the back end API. My workaround was to create a component property called lastEvent then in the onLazyLoad event handler:

onLazyLoad(event: LazyLoadEvent) {
    if (JSON.stringify(this.lastEvent) === JSON.stringify(event)) {
        return false;
    }
    this.lastEvent = event;
}

This prevents the onLazyLoad handler from running multiple times.

[cLandin]

onLazyLoad is also triggered multiple times when sortField and sortMode are specified.
For example, I parse state of application from URL query parameters to variable state in component, because router is my single source of truth.

Component's template looks like this:

<p-table [value]="items"
         [rows]="state.pageSize"
         [first]="state.pageOffset"
         [sortMode]="'single'"
         [sortField]="state.sortField"
         [sortOrder]="state.sortOrder"
         [rowsPerPageOptions]="[10, 20, 50]"
         [paginator]="true"
         [lazy]="true"
         [totalRecords]="totalCount"
         [responsive]="true"
         (onLazyLoad)="onLazyLoad($event)"
         class="break-word table-columns-auto-width"
         [rowHover]="true">
.
.
.
</p-table>

Table has multiple sortable columns (e.g createdAt, updatedAt...).

On first load, state.sortField and state.sortOrder are null.
Then user clicks on column header to sort results by this column.
Click triggers sort() which triggers sortSingle() and therefore onLazyLoad.
What we do in onLazyLoad is simple redirect to same page, with updated query parameters.
New values from query parameters are set to state variable and this causes change of sortField and sortOrder inputs on TurboTable. These inputs are implemented as setters. Each of setters calls sortSingle() which triggers onLazyLoad.

So, sort triggered by user (click) results in 3 onLazyLoad events.
From my point of view, setters should call sortSingle() only if new value differs from internal sort field/order.. or even better, it shouldn't trigger events at all (for all inputs) in lazy mode.

I would say, that our usecase is typical for other developers which use redux/ngrx architecture as well.

Was this bug addressed on the same PR? I think this is also reproducible using customSort

[sheikhajaz]

You can use the property as [lazyLoadOnInit]="false"