Compatibility with Bootstrap 5

[tasam21]

First of all I would like to say thank you for your bootstrap-multiselect components. I have used this bootstrap component in one of my project. Since, I upgraded my project with the latest version of Bootstrap i.e. Bootstrap 5 beta2 As we all know Bootstrap 5 no longer depends on jQuery. Therefore, do you have any plan in upgrading this component to make it compatible with BS5 ? Thanks.

[tiesont]

While Bootstrap 5 doesn't depend on jQuery, it does support it: https://getbootstrap.com/docs/5.0/getting-started/javascript/#still-want-to-use-jquery-its-possible

So aside from any required markup changes, it should still work.

[shinyat]

Does anyone know which tags need to be changed? I'm using v5.0.0-beta3 and I've been looking for a fix. The dropdown is different from v4. Thank you!

[shinyat]

A little progress. I installed popper.js and changed the following lines in the js.

line 410 div class="dropdown" line 450 data-bs-toggle="dropdown"

Not sure if this is fully functioning, but I can see the dropdown popup at least. I'll test furthermore.

[evansharp]

I'd do a PR right now if there was an easy way to catch the Bootstrap version at init and modify Multiselect.defaults.templates.button and Multiselect.defaults.templates.buttonContainer on the fly.

Previously we were able to use $.fn.tooltip.Constructor.VERSION as a hack with some reliability, but since jQuery is now optional, this solution isn't universal.

Silly as it might be, this tiny markup change might require a major version bump for this plugin that is not backwards compatible.

[evansharp]

Any ideas @tiesont ?

[tiesont]

@evansharp Well, we could just emit both versions of Bootstrap's data attributes, although that seems like we'd be polluting the markup (every attribute would basically be duplicated).

Seems like we should be to just detect if jQuery (or Zepto, or any other library offering the same API) is present, and just use the VERSION property like you mentioned.

I haven't looked at Bootstrap 5 in a while. I'll do that and see if I can come up with a better polyfill.

[halimus]

@tasam21, what I did on my side: in bootstrap-multiselect.js

line 407: change buttonClass: 'custom-select', into: buttonClass: 'form-select', line 450: change data-toggle="dropdown" into: data-bs-toggle="dropdown"

and it seems working fine with bootstrap 5.0.2

[roomoraaes]

@tasam21, what I did on my side: in bootstrap-multiselect.js

line 407: change buttonClass: 'custom-select', into: buttonClass: 'form-select', line 450: change data-toggle="dropdown" into: data-bs-toggle="dropdown"

and it seems working fine with bootstrap 5.0.2

Thanks so much. It works for me as well.

[tasamphel]

@halimus thank you for sharing your tips. I'm no more using bootstrap-multiselect for my project. It's replaced with vue-multiselect https://vue-multiselect.js.org/

[gidroponik54]

Is it any updates on this task? Unfortunately @halimus solution does not work anymore :(

[Adi-18]

Same here. Bootstrap v3.3.7 works but not on 5.0.2 nor 4.0

[krit0627]

You can do this, Workaround on bootstrap v5.1 or higher.

$('#example').multiselect({
    buttonClass: 'form-select',
    templates: {
        button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
    }
});

[dhsont]

@krit0627 Thanks You saved my day.

[gh-at-sqh]

if (window.bootstrap && window.bootstrap.Alert.VERSION.startsWith('5'))
$.fn.multiselect.Constructor.prototype.defaults.templates.button = '<button type="button" class="multiselect dropdown-toggle form-control" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>'

[davidstutz]

Also see #1226.

[iainteractive-iain]

Thanks all for the Bootstrap 5 workaround. The major functionality seems to work. However, FYI, I couldn't get includeResetOption working, and I presume it's a Bootstrap 5 incompatibility.

[bobhelwig]

I have made the templates change which fixed most of my issues, but I am having issues with the Select All appearing in all my multiselect dropdowns. It seems that if the dropdown is all unselected it appears, but for SOME, not all, dropdowns if all the options are selected the Select All option is not showing. I can't remember if this worked in bootstrap 3.3.7 or not. I will create a new issue, but wanted to add it here if it is a bootstrap 5 related issue.

[bedroesb]

Would it be possible to support bootstrap 4 and 5 separately like it is done in datatables? I mean, distribute multiple CSS and JS files depending on the Bootstrap version. Another example: selectize.js