Dropdown: Infinite loop dynamic options array

[kmarzinadv]

Describe the bug

Since primeng 17 we can not pass a function or a getter wich build or filter an array to the OPTIONS parameter of a primeng dropdown. In this case, an infinite loop ocure in the browser. This behavior work well with angular 16.2.12 and primeng 16.6.0 (see stackblitz example). I didn't find a workaround yet.

Environment

Reproductible with last angular 17 version and last primeng 17 version only.

Reproducer

https://stackblitz.com/edit/github-mq6jyg?file=src%2Fapp%2Fapp.component.html

Angular version

17.0.0

PrimeNG version

17.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10.0

Browser(s)

Chrome 119.0.6045.160

Steps to reproduce the behavior

Run the stackblitz example with angular 17.0.0 and primeng 17.0.0. The browser will loop.
Comment the two last dropdown of app.component.html and then it work.

Expected behavior

Same behavior of primeng 16 is expected. No infinite loop with two last dropdown uncommented. The last dropdown must display everything except ROME.

[horizoncarlo]

Ran into this as well, took a while track down what was pegging the browser

[pablo191f]

I have the same problem. I hope for a quick fix.

[pratyush22]

It's good that this bug is fixed. It maintains backward compatibility.

But think about the solution which is implemented. The infinite loop was occurring because, as per my best guess, the dynamic arrays which were getting created and assigned to some property, angular change detection was triggered and with every change detection cycle, the dynamic array is again created and the cycle continues.

Now, to solve this, we are checking deep equality. So, consider a situation where we have multiple dropdowns on each page and have a good amount of options for each one of them. Will it not impact performance when deep equality is checked on long lists on each detection cycle?

Right way to fix it will be to gradually remove dynamic arrays from the code and create the lists on specific events. Thoughts?

[cetincakiroglu]

To improve further, we'll replace the getter & setters in list inputs (dropdown, multiselect, listbox etc.) with signal inputs once Angular team releases the feature. Tested in the virtualScroll to see the behavior with large lists, there wasn't a significant difference. But deep equality check will be replaced in the future.