How to set label to empty string in dropdown?

Question

I'm working on this simple multiselect dropdown and I want to set the label to nothing (empty string). However, when I use defaultLabel it doesn't seem to work properly. Is there any way to set the label (testing) to an empty string by default?.

Thanks a lot in advance!

Here's my code:

<p-multiselect
    [options]="registrationStatus"
    [defaultLabel]= "someText"
    [showHeader]="false">
</p-multiSelect>

LIVE DEMO

Answer 1

You can set the empty string as the defaultLabel and define a global css class that will override the default styles of the control and set the initial size. Also you can set a min-width in the style if you want to start with a specific width. Then you apply your css class using the styleClass property. It is mentioned in the official documentation here.

This are the styles to put in in the global css of the application:

.multipleSelectSize {
  height: 30px;
  min-width: 100px;
}

.multipleSelectSize > .ui-multiselect-label-container > .ui-multiselect-label {
  height: 27px;
}

And the html template where you apply the style:

<p-multiSelect [styleClass]="'multipleSelectSize'" [options]="registrationStatus" [defaultLabel]= "someText" [showHeader]="false"></p-multiSelect>

Here is also a StackBlitz link.