PrimeNG Dropdown LazyLoad event not firing - primeng

Question

I have upgraded my Angular PrimeNG app from v9 to 11. Dropdown lazy loading has stopped working and event onBranchLazyLoadEvent isn't called now. Below is the sample code
<p-dropdown id="field_branch" name="branch" [options]="branchOptions" formControlName="branchId"
[virtualScroll]="true" [lazy]="true" [rows]="10" (onLazyLoad)="onBranchLazyLoadEvent($event)" [lazyLoadOnInit]="true" [filter]="true"
placeholder="Choose" optionLabel="name" optionValue="id"></p-dropdown>
What could be wrong here?

Answer 1

Latest versions doesn't support dropdown lazyloading
Reference to latest dropdown source dropdown source
Some open issues about it with working lazy dropdown repo fork by #yelhouti 7284
5955

Answer 2

Since primeng 14 this is again supported (below is their official example with lazy loading and virtual scroll).
<h5>Virtual Scroll (100000 Items) and Lazy</h5>
<p-dropdown [options]="lazyItems" [(ngModel)]="selectedItem2" placeholder="Select Item" [virtualScroll]="true" [virtualScrollItemSize]="38" [lazy]="true" (onLazyLoad)="onLazyLoad($event)" [virtualScrollOptions]="{ showLoader: true, loading: loading, delay: 250 }">
<ng-template pTemplate="loader" let-options="options">
<div class="flex align-items-center py-2 px-3" style="height: 38px">
<p-skeleton [width]="options.even ? '60%' : '50%'" height="1rem"></p-skeleton>
</div>
</ng-template>
</p-dropdown>

Answer 3

Even though the primeng 14 documentation says it's supported, it doesn't truly work. Not even on the example page and there is very little saying about this.

Answer 4

In PrimeNG 13, where the option lazy doesn't exist, I managed to hack it like this (and I assume it will work for earlier versions like your 11):
<p-dropdown
[options]="tags$ | async"
formControlName="tag"
appendTo="body"
optionLabel="name"
optionValue="code"
[showClear]="true"
[emptyMessage]="(areTagsLoaded$ | async) === true ? 'No tags found' : 'Loading tags...'"
(onShow)="loadTags()">
<ng-template let-tag pTemplate="item">
<div>{{ tag.name }}</div>
</ng-template>
</p-dropdown>
The code above should be self-explanatory, you need to load your options in the loadTags() or loadWhatever() method and make sure you don't load them again, depending on your needs, by using an extra boolean like areTagsLoaded.