b-form-select incorrectly renders with .form-control class

[jpicton]

According to https://getbootstrap.com/docs/4.1/components/forms/#select-menu the markup for creating a custom select is as follows:

<select class="custom-select">...</select>

When using <b-form-select>, the rendered markup is:

<select class="form-control custom-select">

The inclusion of the .form-control class is incorrect. In fact, it triggers the following Bootstrap CSS which causes the height of the select element to be smaller than it ought to be.

select.form-control {
  &:not([size]):not([multiple]) {
    height: $input-height;
}

The rendered markup of this component should be the same as the Bootstrap prescribed markup.

[mosinve]

There's an issue with Bootstrap twbs/bootstrap#23058

[mosinve]

BTW, as you can see here https://codepen.io/cih/pen/OEzEzw - the difference is only in case of using select.form-control - which is a plain select

[jpicton]

I have a custom $custom-select-height value. In your codepen the select.custom-select and select.custom-select.form-control elements only have the same height because the default Bootstrap variable values happen to make this occur. But with a custom $custom-select-height value, the inclusion of the form-control class means an incorrect height is applied to the select element.

I see that Bootstrap are changing the select styles in a future release, but that doesn't change the fact that currently bootstrap-vue doesn't render the bootstrap markup correctly.

[tmorehouse]

It was placed there to compensate for original issues with custom selects (missing sizes, missing 100% width, not matching heights of other form-controls, etc)

Of which most have been fixed. It will be removed in the upcoming release if the next update of BS V4.1 includes the fixes.

BTW. Nothing is preventing you from using a basic <select> with custom classes with the model v-bound to your data.