Dropdown: placeholder isn't shown when having null as a selectable option

[rubenteck]

Describe the bug

When adding null as a selectable option, the placeholder isn't shown on load, when selecting the null value (the 'empty' option) or when clearing the dropdown. In my example, the values are objects of type { label: 'label', value: 'value' } with the optionLabel and optionValue params set on the p-dropdown component. The null value is set as { label: null, value: null }.

Environment

I use a windows 11 laptop with IntelliJ. Angular 17.3.4, PrimeNG 17.13.0 and node v18.20.1.

Reproducer

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

Angular version

17.3.4

PrimeNG version

17.13.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v18.20.1

Browser(s)

No response

Steps to reproduce the behavior

1. create a dropdown component with null value as an option (see stackblitz)
2. start the app, the placeholder is not visible
3. select the empty option, the placeholder is not visible
4. click the clear button, the placeholder is not visible

Expected behavior

the dropdowns value should be the placeholder when loaded, cleared or empty is selected.

[rosenthalj]

PrimeNG's Dropdown allows the developer to define both a label and value. The problem you are experiencing is because you are not fully utilizing this capability. I have updated your original reproducer and with the changes the dropdown works as expected as long as you use the new getValue method to access the selected. PrimeNG, without any changes to the Dropdown component, can handle your use case.

updated reproducer: https://stackblitz.com/edit/github-bjxtkz-ueanuf?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts

The video below demonstrates your use case working properly with the current PrimeNG dropdown

dropdownWorkingCorrectly.mov

[rubenteck]

Thank you for your solution. While it's possible to create an empty value like this, I don't think it solves the problem of the empty value not showing the placeholder when selected. If I'm wrong about this, please explain it further :)

[rosenthalj]

Thank you for your solution. While it's possible to create an empty value like this, I don't think it solves the problem of the empty value not showing the placeholder when selected. If I'm wrong about this, please explain it further :)

I don't think I can explain further.

Obviously, it's up to PrimeNG to determine whether or not this issue #15308 is valid.

[cetincakiroglu]

Hi,

We're currently updating the tests. Once the dropdown is updated, we'll test this issue and your PR to avoid breaking changes. I'm moving this to the next milestone.

[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 open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,