Dropdown: p-dropdown in custom component ignors first ngModel value

[MayerMar]

Describe the bug

hi, i've got a timing problem when wrapping your p-dropdown in a custom component.

Scenario:

• I have a list of items and an editor with a dropdown to change the properties of one item.
• Editor is shown only when an item is selected.
• Editor holds the wrapped dropdown (wrapped for reusability with defined options).

Problem:

• When wrapped dropdown gets initialized, it skips the first real value transmitted via ngModel. --> not the custom component itself, but the internal p-dropdown overwrites the ngModel-value

not sure, but could be that the effect() delays the internal behavior?

I upgraded from an older version of primeng prior to onPush and Signals, there this implementation worked without problems. The behavior can be "fixed" from within the wrapped component by delaying the first value transmitted via ngModel with setTimeout(), which feels odd.

Question is: is this a bug, an accepted problem or bad implementation on my side :-)

I made a stackblitz (link) example to show the problem:

• select an item in the list

  • custom component has no value, native p-dropdown has the value
  • next selection within list works fine (editor is already existent, as the wrapped component is)

• clear value - destroy editor & dropdowns

• useFix-button:

  • adds a delay (setTimeout) to the writeValue-method of the custom component
  • with this fix you can select an item and it is displayed correctly in both dropdowns
  • further selections also work well
  • does not feel right to use this timeout in this place

Thanks & best regards!

Environment

Stackblitz, latest angular, latest primeng

Reproducer

https://stackblitz.com/edit/github-4z4rkv-shubex?file=src%2Fapp%2Fcustom-dropdown%2Fcustom-dropdown.component.ts

Angular version

17.1.0

PrimeNG version

17.3.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Browser(s)

Chrome latest

Steps to reproduce the behavior

No response

Expected behavior

No response

[philkrpp]

yes same for me

[gasparbarancelli]

MultiSelect component has the same bug

[KeithGillette]

I believe we are experiencing the same timing issue with p-dropdown bound to [ngModel] with an initial value set through static initialization on a controller class property. In our case, the p-dropdown gets its value from the row in a p-table but I have created a much simpler StackBlitz reproduction that shows the timing issue with single p-dropdown components.

[scurk1415]

We are having the same problem. When the dropdown is wrapped inside a custom form input component (with ControlValueAccessor). When the options are dynamically loaded (from BE call with async for example), the model gets auto updated to a null/empty (because the options are not yet available). Setting autoDisplayFirst to false helps a little, but doens't fix the issue if options/model value are changed after the first init of the component. Not sure why you are still using it in the code when its deprecated.

Version 17.3.3 still works ok.

[domen-j8]

We're encountering the same issue with the p-dropdown component inside a custom input when data is loaded dynamically, leading to the model being reset to null. Latest working version is 17.3.3 with autoDisplayFirst set to false.

[KeithGillette]

I believe we are experiencing the same timing issue with p-dropdown bound to [ngModel] with an initial value set through static initialization on a controller class property. In our case, the p-dropdown gets its value from the row in a p-table but I have created a much simpler StackBlitz reproduction that shows the timing issue with single p-dropdown components.

I updated this reproduction to show the issue remains in today's release of 17.6.0.