Do not hide .selectpicker by default

[cyChop]

I recently updated to bootstrap-select 1.10. A change that I remarked from our previous version (1.7) is that now, the .selectpicker class is hidden by default.

Now, the documentation recommends to use this class to mark the <select></select> which should be bootstrapped. Yet, a <select class="selectpicker"></select> is now hidden even before Bootstrap-select was called into action.

While this can be of course understood as a default behaviour, it seems a mistake to me. Firstly, it might cause regressions to those upgrading (as in our case, but that's not why I report this; upgrading is our choice/need, this is our problem now).

Secondly and foremost, this annihilates the fallback case/degraded mode. Simple example: I want to use Bootstrap-select, so I import the style and script. But the user has not JS activated in their browser, or the script fails to load for a reason. Before, the old-fashioned <select></select> would still have been accessible. With the defaultly-hiding .selectpicker class, the combobox is just missing from the page.

Preparing for not-available JS situations appears to me as a good practice for any JS developer, and this would be a simple fix for such a case.

[caseyjhol]

Is there a reason (other than having JS disabled) that having the select hidden by default wouldn't be ideal? This was added back in https://github.com/silviomoreto/bootstrap-select/commit/c711c8ca458852bdc0b82e38ac70674b39512a62 - specifically to address the flash of unstyled content.

[cyChop]

OK, I understand the purpose.

Yet, I see two additional limitations:

• Any error in the JS prior to the calling of selectpicker() will cause the function not to be called, and therefore the picker to be unavailable.
• Though the .selectpicker class is recommended in documentation, it is not an obligation. Any jQuery selector will do (we often use an ID on our project, though the copy-pasting has the presence of the class on all pickers as a consequence, sometimes even on selects we did not call .selectpicker() upon). What I see here is that there are two different treatments:
  • for selects with the .selectpicker class, no blinking occurs.
  • for others, there is a blinking.

Now, in both cases, this might be more the problem of the developer than Bootstrap Select's. But the same could be said about the blinking: if the developer is unafraid of not having a fallback solution, they can add .selectpicker {display: none;} to their CSS themselves.

I'd understand if this issue turns into a won't fix now that I have the history. Thanks.

[kapilggg10]

I am also facing the exact same issue with selectpicker in bootstrap4.2.1, when I am changing route and revisit the route on which selectpicker is used, that select is gone for always. I don't know how to fix this?

[jOHAN-bIRD]

When loading the select (whether inside a modal or on the main page), insert this call after the HTML:

$('.selectpicker').selectpicker('render');

This way it will render the selects again.