PrimeNG p-dropdown not taking custom default value

Question

I am using p-dropdown in my app and have noticed that after upgrading to PrimeNG 9 & Angular 10, the p-dropdown is no longer taking the custom value as the default value. Instead it takes the first value present in the options list as the default value. Further more the label now only fills half of the drop down while the reset is just empty. How can I fix this? Thanks in advance.

here is my template:

<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px">
    <p-dropdown [options]="cityList" tooltipPosition="left" [(ngModel)]="selectedCity" optionLabel="label"></p-dropdown>
    <p-dropdown [options]="carList" tooltipPosition="left" [(ngModel)]="selectedCar" optionLabel="label"></p-dropdown>
    </p-button>
</div>

here is my ts code:

this.carList = [{ label: 'BMW', value: 'BMW' },{ label: 'Tesla', value: 'Tesla' },{ label: 'Toyota', value: 'Toyota' }];
this.cityList = [{ label: 'New York', value: 'New York' },{ label: 'Chicago', value: 'Chicago' },{ label: 'Boston', value: 'Boston' }];


this.selectedCity = { label: 'None', value: 'None' };
this.selectedCar = { label: 'None', value: 'None' };

Answer 1

In order for the dropdown to set the default to your custom value, your value must be part of the list. So, if you want to set it to 'none' originally, you need to have 'none' in the list. Note that your selectedCity and selectedCar should only be set to the values, not the selectItems. So you should just have selectedCity = 'None' etc.

If you do not want to add 'None' to your list, I suggest you use a placeholder instead - where you show the placeholder until a value has been selected