Skip to content

fix(select): blank panel with virtualScroll + lazy in dialog (#19423

Open
khaledbaghdadii wants to merge 1 commit into
primefaces:masterfrom
khaledbaghdadii:fix/select-virtualscroll-dialog-zones-19401
Open

fix(select): blank panel with virtualScroll + lazy in dialog (#19423
khaledbaghdadii wants to merge 1 commit into
primefaces:masterfrom
khaledbaghdadii:fix/select-virtualscroll-dialog-zones-19401

Conversation

@khaledbaghdadii
Copy link
Copy Markdown

Fixes #19401

Problem

When p-select is configured with [virtualScroll]="true" and [lazy]="true" inside a p-dialog
with appendTo="body", the dropdown panel opens blank. Items only appear after an additional user
interaction (click, keypress).

Root Cause

p-motion's afterRenderEffect uses await nextFrame() (double requestAnimationFrame), which
causes execution to escape NgZone. The onAfterEnter animation callback fires outside NgZone,
so the scroller's entire initialization chain (init → setTimeout → calculateOptions → onLazyLoad)
runs outside the zone. Angular never detects the subsequent item updates, leaving the panel blank.

Fix

Add an onOverlayAfterEnter handler that re-enters NgZone via zone.run() before triggering
cd.detectChanges(). This ensures all downstream async operations (setTimeout, lazy load events,
data fetches) are intercepted by zone and trigger change detection when they resolve.

onOverlayAfterEnter(event: any) {
    if (this.virtualScroll) {
        this.zone.run(() => {
            this.cd.detectChanges();
        });
    }
}

…ndTo on zoneless apps (primefaces#19401)

- Add onOverlayAfterEnter hook to trigger detectChanges after overlay animation
- p-scroller init was skipped when isVisible() returned false during animation
- In zoneless CD strategy, no automatic CD cycle retriggers the initialization
- New method forces CD after overlay is fully visible
- Add regression test for virtual scroll + lazy loading in dialog with zoneless CD
@domvanrob
Copy link
Copy Markdown

I've got the same issue with the overlay in my TreeSelect component. Running this manually after the onShow output fixes it.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

p-select with virtualScroll + lazy inside p-dialog renders blank dropdown until user interaction (v21)

2 participants