Add custom classes to individual options and callbacks to disable field on <b-form-select> component

Is your feature request related to a problem? Please describe…

Not explicitly related to an issue, although it’d be a nice feature to have. Previously, while using a normal select field, I could do this to add a specific class to an individual option:

<select class="form-control" v-model="selected" :disabled="isSelectDisabled()">
	<option disabled>--- Select Something ---</option>
	<option
		v-for="option in myOptions"
		:value="option "
		:disabled="isOptionSelected(option)"
		:class="{'strikethrough':isOptionSelected(option)}"
	>
		{{ option.text }}
	</option>
</select>
<b-btn @click="selectOptionFromModel">Select Option</b-btn>

being isOptionSelected(option) a method in my component returning a boolean whether the option has been selected.

Now I’m using the BFormSelect component to pass an array of options so I don’t have to create the select myself. I have noticed that passing a callback to {disabled: myCallback} only evaluates when building the options object. It’d be great if that callback could be re-evaluated on an event. Also, I cannot pass a custom class anymore depending on the option being selected.

Describe the solution you’d like

For the disabled field, it’d be a good solution to allow a custom event being caught by the component so the callback assigned to this property can be re-evaluated when the even is fired (passing the option value as an argument).

For the custom classes, I’d suggest a optionClass property in the object that could accept the same values that can be passed to the :class="[...]" property. In the case of a callback being passed as condition to apply the class, the option value should be passed

Describe alternatives you’ve considered

Currently I am re’evaluating those callbacks when needed so I can enable/disable the options acordingly by finding them in the array of options and setting the disabled property to what I need. As for the custom classes, there isn’t much that can be done other than modifying the DOM with vanilla JS, which is a bad idea when using Vue, so I can live without those classes as long as the option is disabled.

[tmorehouse]

It would make the b-form-select more complex, just like it would make your own wrapper component more complex.

And doing a v-for to get you the layout you like is maybe two extra lines of template markup

<b-form-select v-bind="{ ...$props, options: null }" v-on="$listeners">
  <option v-for="opt in options" :key="opt.text" :class="opt.class" :value="opt.value">
    {{ opt.text}}
  </option>
</b-form-select>

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!