Component: p-Dropdown placeholder/values not displayed

[asithade]

Describe the bug

When using p-dropdown, we've noticed that some of the dropdowns when a value is not selected end up with a short height with no placeholder value set. The weird thing is that not all p-dropdowns are affected -- it's quite random on how it is chosen.

• Some have dynamic placeholders (Dropdown: dynamic text in placeholder is not displayed #14320) and some have static placeholders.
• Could be related to dropdowns with dynamic values too
• Some have values set, but the input doesn't display it
  • Only after selecting a different value does it reflect on the input

Screen.Recording.2024-02-01.at.10.48.59.PM.mov

Screen.Recording.2024-02-01.at.10.56.22.PM.mov

Environment

I'm expecting the dropdown to either display the current value or the placeholder.

Reproducer

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

Angular version

17.1.1

PrimeNG version

17.4.0 & 17.5.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.19.0

Browser(s)

Brave Version 1.62.153 Chromium: 121.0.6167.85

Steps to reproduce the behavior

No response

Expected behavior

I expected the dropdown to either show the placeholder value or the active value

[stepkillah]

Same issue, noticed after updating to 17.5

[mdybich]

Same issue here, works as expected on 17.4.0 but it's broken on 17.5.0

[Draganlazarev90]

Also doesn't work with reactive forms, when you set fromcontrol value it doesn't display it

[mastersys-giovanni]

Same error.

[buchatsky]

Surprise: it does not work in my project, but it does work in Stackblitz.
Race condition? Nested components?

[jozif001]

same issue after upgrading to primeng version 17.5.0,
using Angular 17.1.0

[Cr3aHal0]

Hello everyone,
asithade I tried binding a formControl(Name) or ngModel (since both are about ControlValueAccessor in backstage) to your p-dropdown and it seems to make the placeholder appear, same for buchatsky example. This is indeed not a fix but it can temporary help you having a proper rendering while PrimeNG team has time to fix it.

Example :

<div [formGroup]="formGroup">
  <p-dropdown
    formControlName="value"
    [options]="options"
    [placeholder]="'Testing Placeholder'"
  ></p-dropdown>
</div>

Ts:

  formGroup = new FormGroup({
    value: new FormControl(),
  });

[davidediak]

yikes this is so bad

[asithade]

Hello everyone,
asithade I tried binding a formControl(Name) or ngModel (since both are about ControlValueAccessor in backstage) to your p-dropdown and it seems to make the placeholder appear, same for buchatsky example. This is indeed not a fix but it can temporary help you having a proper rendering while PrimeNG team has time to fix it.

Example :

<div [formGroup]="formGroup">
  <p-dropdown
    formControlName="value"
    [options]="options"
    [placeholder]="'Testing Placeholder'"
  ></p-dropdown>
</div>

Ts:

  formGroup = new FormGroup({
    value: new FormControl(),
  });

Unfortunately, all of my inputs are already utilizing reactive form controls, so that fix doesn't work for me 😞

[cetincakiroglu]

Hi,

Thanks a lot for letting me know, the issue is fixed now.

[mdybich]

@cetincakiroglu The issue should be closed when the version is released, not when the commit is merged to master branch.

[asithade]

Works now on the latest release. Thank you!

[Sothecom]

Hi, this is no longer working in 17.7, should I raise a new issue?

[pradnya-khairnar]

same issue facing in Primeng 17.18.9. using formControl/ngModel doesn't set value in dropdown textbox after selecting value.

edit: solved by: #14094

[Medioman92]

Still broken in 17.18.11. though adding a placeholder "fixes" the problem

[Yoranium238]

The issue appears to be a problem where the bound input (ngModel) is an empty string (""). The placeholder will only display if the bound input is undefined.

html

<p-dropdown [(ngModel)]="dropdownString" [editable]="true" placeholder="Dropdown String">

component

export class AutocompleteDropdownDemoComponent implements OnInit {
countries: any[] | undefined;

selectedCountry: any;
dropdownString: string; // Sets placeholder
dropdownString: string = ""; // Does not set placeholder