Disabled options do not get disabled

[mllull]

I think that Dropdown should have an attribute that allows you to mark certain item as disabled.

There is already and optionDisabled, but its only a boolean, and you can`t conditionate an item.

An example:

<Dropdown v-model="selectedAdult" :options="adults" optionLabel="name" placeholder="Select an Adult" />

and you have:

data() {
	return {
		selectedAdult: null,
		adults: [
			{name: 'Alice', age: 20},
			{name: 'Bob', age: 16},
			{name: 'Ducke', age: 22},
			{name: 'Michael', age: 35},
			{name: 'Tommy', age: 12}
		]
	}
}

How can I set Bob and Tommy as disabled? I can't interact with item's age .

[codenomnom]

That's not a request - the feature is already there, but there's a history: #1037 which is "fixed" by 342f251 .

Unfortunately it completely breaks the functionality, even though you can still achieve it. Currently you can disable single item like that:

<Dropdown optionDisabled="anything" />

options = [{
  // ... item properties
  optionDisabled: true
}]

This is because the current code is this:

isOptionDisabled(option) {
    return this.optionDisabled ? option.optionDisabled : false;
},

As you can see, it checks for the component property optionDisabled, and if it has any truthy value, then it sets disabled to the option's property optionDisabled. They are two completely different things, and the second must be a boolean.

The previous code was:

return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;

I am not completely sure why this was marked as broken. I was able to properly use it before like that:

<Dropdown optionDisabled="myDisabledPropertyKey" />

options = [{
  // ... item properties
  myDisabledPropertyKey: true
}]

And it worked like a charm. Exactly like how optionLabel and optionValue work.

@tugcekucukoglu do you have any memory of what made you do this change?

[mllull]

First of all, many thanks @codenomnom for your time!

The implementation seems nice, but I think that's not the best way to solve it, because my data comes from an API, so with this implementation, I can't use directly the code from API, I have to edit it by setting this myDisabledPropertyKey to true.

Anyway, I will give it a try 👍

[cagataycivici]

Seems to be a regression, fixed now. Thank you.