'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.

laravellaravel-8bootstrap-5bootstrap-select


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Karl Hill

Related Questions