Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
andrea-agostini opened this issue Oct 11, 2024 · 2 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@andrea-agostini
Copy link

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: #15765

Environment

Linux

  • Vivaldi 6.9.3447.54
  • Firefox 127.0

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.

@andrea-agostini andrea-agostini added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Oct 11, 2024
@wS2Zth
Copy link
Contributor

wS2Zth commented Oct 13, 2024

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

3 participants