Dropdown Option: Does not display selected value when editable=true

[Triskae]

Describe the bug

When using Dropdown options component, with editable=true, the selected option is not displayed and even, if an initial value is provided, it also does not display it.

Environment

"@angular/cdk": "^17.0.1",
"@angular/common": "^17.0.3",
"@angular/compiler": "^17.0.3",
"@angular/core": "^17.0.3",
"@angular/fire": "^16.0.0",
"@angular/forms": "^17.0.3",
"primeng": "^16.9.1",

Reproducer

https://stackblitz.com/edit/j4pc5m?file=src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.html,src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.ts

Angular version

17.0.3

PrimeNG version

16.9.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

21.2.0

Browser(s)

No response

Steps to reproduce the behavior

Use DropdownOption component, set the param editable to true.

Expected behavior

No response

[cetincakiroglu]

Hi,

Could you please try with it PrimeNG 17.0.0-beta.1 I couldn't replicate with the latest. Probably the issue is fixed in 16.9.2

[github-actions]

We're unable to replicate your issue, if you are able to create a reproducer by using PrimeNG Issue Template or add details please edit this issue. This issue will be closed if no activities in 20 days.

[Triskae]

In the provided stackblitz, it uses the v17 version of primeng, and the problem is still there.

[Triskae]

Enregistrement.de.l.ecran.2023-11-28.a.10.06.56.mov

At the end of the video, you will see that a I refresh the page, and the New York entry is suposed to be selected by default, as you can see in the form control. But as you can see in the video, in the dropdown, the entry is selected, but not displayed when the dropdown is closed.

@cetincakiroglu

[Triskae]

Hi @cetincakiroglu
I have a little more data about this bug. It only happens when you set editable to true, and you set optionValue to some value. If there's not optionValue, there's no problem.
The problem is that it's a regression, because, I also use Reactive forms with your components, and in order to store the proper selected data, I have to specify the optionValue option, to not store the whole object in the form.

The options we give to this component have to following structure:

export interface DropdownOption<T> {
  label: string;
  value: T;
  disabled?: boolean;
  tooltip?: string;
  dataKey?: string;
}

So we MUST use optionValue, in order to not have a FormControl with this object in it, instead of only the "value" field.

[Triskae]

Cannot even use the selectedItem template to bypass the problem. Everything seems linked to editable=true. I updated the stackblitz to illustrate the problem

[rpionke]

I'm facing the same issue. I can not see any workaround currently then to set editable=false

[Triskae]

Yep, we also cannot find any workaround ... It's an internal software, so we told everyone there was this problem, because, we obsolutly need the editable feature, in order to provide a custom volue, not listed in the dropdown options ...

[Triskae]

For those using an option objet with that looks like this:

export interface DropdownOption<T> {
  label: string;
  value: T;
}

You can omit optionValue and optionLabel property, and it will solve the problème .
If your options objects do not use an object like the above one, you will have to wait the bugfix sorry.
@rpionke

[Triskae]

Any news guys ? @cetincakiroglu Can you at least change the ticket status ?

[jules-js]

any updates on this one? I'm facing the same issue.

[Triskae]

Nope, nothing, not even the status change, since the example I provided reproduce the exact problem. @jules-js

[dalenguyen]

Try with v17.10.0, it seems working now.

[Alexkill536ITA]

I have also encountered this bug also occurs with filter option instead of editable

PrimeNg: 17.18.3

[tipodisimmia]

Same problem for me with filter option instead of editable!!!

PrimeNg: 17.18.3

[cnlane]

I'm having the same problem using PrimeNg: 17.18.11 and NOT using the filter or editable options but I am using [(ngModel)] (template driven). In another application, I'm using formControlName (reactive) instead. Not sure if that's the difference but maybe?

[mertsincan]

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 reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,