Primeng: Dropdown empty label shows "empty"

[Ketec]

[ ] bug report => Search github for a similar issue or PR before submitting
[ x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
Adding a item with empty string causes dropdown to show "empty".
<span *ngIf="!itemTemplate">{{option.label||'empty'}}</span>
Adding string with just a space causes item to lose height.

Expected behaviour
Shows empty entry without text.

What is the motivation / use case for changing the behaviour?
To add a option for deselecting/choosing none (grid filters for example).

[Sumragen]

Hello @Ketec

I think in your case the best solution will be to set property label as null or undefined or actual empty string. I mean string like this "" without white space like " ".
But keep in mind, when you use undefined dropdown shows empty string BUT if that value is selected input will consist label undefined. Like this

Moreover, in case when value of an item is " " label in dropdown will be like

instead of

Also you should remember when value is empty <li> element consists class ui-dropdown-item-empty that gives text-indent: -9999px;, because of [ngClass]="{'ui-dropdown-item-empty':!option.label||option.label.length === 0}"

I hope this helps.

[Ketec]

@Sumragen using empty string or null causes primeng to show text "empty".
This is from their source:
<span *ngIf="!itemTemplate">{{option.label||'empty'}}</span>
Empty string/null both equate to false.

[Sumragen]

@Ketec I'm agree with you, but look at the level above.

And what does ui-dropdown-item-empty class do

[Ketec]

But it still shows empty in the dropdown input.
http://plnkr.co/edit/cSeR7SMdhvZqPaWzZ0BZ?p=preview

[dgorobopec]

I think that the dropdown input shows empty when an empty option is selected is due to this line :
<label [ngClass]="{'ui-dropdown-label ui-inputtext ui-corner-all':true,'ui-dropdown-label-empty':(label === null)}" *ngIf="!editable&&(label !== null)">{{label||'empty'}}</label>

If we defined our option label as an empty string : "" the option.label is not null and so the variable label that should be printed in the label property shown above is not null either.
Then the ui-dropdown-label-empty class is never assigned to our dropdown label and the empty text is always shown.

What i don't understand is why the label is set to empty if :
get label(): string { return (this.selectedOption ? this.selectedOption.label : null); }
is supposed to use the selected option where we defined the label as an empty string.

Please correct me if i misunderstood anything.

[BenoitFroment]

Some explanations PrimeNG team ? Expected behaviour ? It will be a setting or something in the future ?

[c4rr3r4]

Same problem on dropdown in datatable's filters with latest version of PrimeNG, any explanation please ?

[cagataycivici]

Seems to be fixed at;

https://github.com/primefaces/primeng/issues/4013

[jonyto123]

If there is no label in the object still shows empty :(

[certifirm]

Yes, shows empty in PrimeNG10 and 11 but works well in 9 and before

[anaq1]

This issue comes back in version 11, I created an issue for it: https://github.com/primefaces/primeng/issues/9722. There is a workaround - add a space to the label, so the empty item looks like this: {label: ' ', value: null}, but it required additional styling - the dropdown is collapsed with selected empty item.

[marob]

Note that if you added a {label: '', value: null} option to prevent automatic selection of the first value, you may use [autoDisplayFirst]="false" instead.