p-dropdown: Not initializing the options if options set inside observable inside ngOnInit

[mojo2405]

Describe the bug

When setting the options attribute inside a p-dropdown inside the ngOnInit function, it will not work if the options parameter is not initialized inside the subscription block.

Environment

https://stackblitz.com/edit/scbcb5-ywrxtb?file=src%2Fapp%2Fdemo%2Fdropdown-virtualscroll-demo.ts

Reproducer

stackblitz

Angular version

17.8.5

PrimeNG version

17.7.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.8.0

Browser(s)

Chrome

Steps to reproduce the behavior

Create an observable and subscribe to it inside the ngOnInit function, and set the options parameters of the p-dropdown component inside the subscription block. If the options parameter is not initialized inside the subscription block - the options will not be selectable inside the component(it will be shown but not selected).
in the example - uncommenting line 25 will solve the issue.

Expected behavior

you don't need to initialize the options parameters inside the subscription block; it should work if you initiated it before.

[IEdiong]

@mojo2405 Have you resolved this issue?

[SMayer135]

Thank you! I just burned an entire day attempting to track this down, I can't believe it was something this simple. Every drop down in my application is broken after this upgrade, and I only upgraded because multiselect filter is broken in 16!

[lrpowell]

Can someone look into this? We would really appreciate it!

[julesyan]

I managed to reproduce this even without a subscription block. In this case it is after the view is initialized.
https://stackblitz.com/edit/xdzkrc-1vso1r

[julesyan]

@mojo2405 and @SMayer135 I found a workaround: https://stackblitz.com/edit/scbcb5-kwhdeq?file=src%2Fapp%2Fdemo%2Fdropdown-virtualscroll-demo.ts

Basically instead of:

this.items.push({ label: 'L1', value: 'L1' });
this.items.push({ label: 'L2', value: 'L2' });

Do instead:

let res = [];
res.push({ label: 'L1', value: 'L1' });
res.push({ label: 'L2', value: 'L2' });
this.items = [...res];

You cannot use the push function specifically on the array used in options. If you do it seems to cause this bug. Even if you reassign the array after push (with the spread operator) the bug still persists. I am not sure of the real fix but this workaround works for now.

[mehmetcetin01140]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,