Search code examples
laravellaravel-8bootstrap-5bootstrap-select

Laravel 8 - Bootstrap 5 Bootstrap-select dont show options


I am trying to set bootstrap-select in laravel via laravel mix. Everything seems correct, but when clicking on the select, it does not show the options.

In resources/js/Bootstrap.js I add the libs, popper before jquery and bootrstrap and bootstrap-select later.

const { popper } = require('@popperjs/core');

window._ = require('lodash');
   

try {
    require('bootstrap');
    window.$ = require('jquery');
    window.jQuery = require('jquery');
    require("jquery-datetimepicker");
    require("bootstrap-select");


} catch (e) {}

In the blade template I have the following code:

        <select class="form-control" id="user" data-live-search="true">
            <option value="0">one</option>
            <option value="1">optionX</option>
            <option value="2">optionX</option>
            <option value="3">optionX</option>
            <option value="4">optionX</option>
            <option value="5">optionX</option>
        </select>

<script>
    $( document ).ready(function() {
        $('select').selectpicker();
    });        

</script>

It seems that everything is correct, the select is shown, and there are no errors in the console, but pressing does not show the options.


Solution

  • Bootstrap 5 doesn't work with Bootstrap-select 1.13.xxx. I had to grab one of beta/RC to get it to work with Laravel 8 and Bootstrap 5

    I used

    npm install bootstrap-select@next
    

    Hope this helps