primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.39k stars 4.59k forks source link

p-dropdown: With reactive forms setValue() seems to update the underlying model but does not show changes in dropdown #16519

Open andrea-agostini opened 2 weeks ago

andrea-agostini commented 2 weeks ago

Describe the bug

When receiving data from the backend in order to populate a reactive form control and subsequently calling setValue on that very same reactive form control, the underlying data changes but the dropdown does not update with the newly selected item.

Possibly related to this very similar bug: https://github.com/primefaces/primeng/issues/15765

Environment

Linux

Reproducer

https://stackblitz.com/edit/qxhoel-vy2csn

Angular version

17.3.10

PrimeNG version

=17.7.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.20.3

Browser(s)

No response

Steps to reproduce the behavior

  1. Click on "Upload File" button
  2. Select a random .txt file
  3. On fake fetchData() service completion, backing code correctly populates cities array and sets selectedCity formgroup value, but 'New York' option doesn't get selected in the "City" dropdown even if model has been updated, as shown from "List Object" and "selectedCity" labels.

Expected behavior

'New York' becomes the selected option in the "City" dropdown, exactly as it happens downgrading PrimeNG dependency version to ~17.6.0.

wS2Zth commented 1 week ago

Hi, I checked the source code. In version 17.7.0, there is a change regarding how the label is displayed. I couldn't dive into it deeply, but if you simply reassign the reference of the cities variable, everything should work fine. You can choose whichever approach fits your case.

this.cities = [...items] or

this.cities = items.map((item) => ({
    name: item.name,
    code: item.code,
}));

or this.cities = items;

andrea-agostini commented 1 week ago

Thank you Agah, reassigning the reference did indeed the trick and now the dropdown selects correctly the item after calling setValue(), even in my real use-case: it's obviously not the preferred approach since I'll probably have to adapt my code in other places as well, but the change is really trivial and I can definitely live with it.