Dropdown ignores 0 value

[fairking]

primevue: ^2.2.1

the Dropdown not showing selected value which is 0.

For example:

<Dropdown v-model="remindBeforeMinutes" :options="reminderOptions" 
    optionValue="value" optionLabel="name" placeholder="Select Reminder" />

data() {
	return {
		remindBeforeMinutes: 0,
		reminderOptions: [
			{name: 'Before 0 min', value: 0},
			{name: 'Before 5 min', value: 5},
			{name: 'Before 15 min', value: 15},
			{name: 'Before 30 min', value: 30},
			{name: 'Before 1 hour', value: 60},
			{name: 'Before 2 hours', value: 120},
		]
	}
}

The result is:

Should be:

[fairking]

Could be the same issue with Autocomplete and Multiselect components.

[juanparati]

The issue is that 0 is evaluated as negative. A dirty workaround is to use '0' (as string) instead of 0 (as integer).

A possible proposal as improvement for the component is to provide a property indicating which values are not empty.

Example:
<Dropdown :not-empty="[0, '']" />

If the model matches with any of the "notEmpty" property then do not consider as empty and hereby show the option in the dropdown list.

[nestorrente]

IMHO only null and undefined (and maybe empty string) should be considered as "no value". 0 could be a valid value when you are using integer keys, and even false can be valid in some scenarios - i.e. imagine you want to use a Dropdown with values "yes" and "no" instead of a checkbox.

Of course, this can be a breaking change. If you don't want to do that, then I will go with something like the notEmpty solution proposed by @juanparati. However, I would prefer an emptyValues property that you could use in order to specify which values you want to consider as "no value" - it feels more secure for me, as you don't have to check which of your values are falsy ones in order to explicitly allow them. Example:

<Dropdown :empty-values="[null, undefined]" />

Using this option, you could be confident using numbers without worring about 0 nor NaN, using booleans without worring about false, and so on.

[fairking]

Please look at the another example which we are considering to implement:

<label for="reminder">Reminder</label>
<Dropdown id="reminder" 
    v-model="remindBeforeMinutes" :options="reminderOptions" 
    optionValue="value" optionLabel="name" 
    :show-clear="true" placeholder="No reminder" />
<ValidationMessage v-if="showWarning">Based on the selected option we will also remind you by email.</ValidationMessage>

data() {
	return {
		remindBeforeMinutes: null,
		reminderOptions: [
			{name: 'Before 0 min', value: 0},
			{name: 'Before 5 min', value: 5},
			{name: 'Before 15 min', value: 15},
			{name: 'Before 30 min', value: 30},
			{name: 'Before 1 hour', value: 60},
			{name: 'Before 2 hours', value: 120},
		]
	}
},
conputed: {
    showWarning(): boolean {
        return this.remindBeforeMinutes >== 60;
    }
}

@juanparati
A dirty workaround is to use '0' (as string) instead of 0 (as integer).

If I need to calculate the input value (see computed) I must convert it to integer first.

[cagataycivici]

0 should be a valid value, this works in 3.x btw, will check for 2.x.

[cagataycivici]

We're unable to replicate on 2.x, please create a new ticket with a sample after testing with 2.2.3