Bootstrap 5 support

[pchaganti]

Trying to instantiate a new bootstrap select when using BS5 gives this error. I realize BS5 is still alpha but this is something to keep an eye on. Hopefully it is a simple fix in the constructor.

TypeError: undefined is not an object (evaluating 'C.dropdown._menu=C.$menu[0]')

thanks

[caseyjhol]

Looks like this has to do with Bootstrap 5 dropping jQuery, so some of the variables/methods will have to be accessed differently.

https://plnkr.co/edit/w2MkWyZCEoa4KJ3W

[AnnoyingTechnology]

@caseyjhol are there any plans to support Bootstrap 5 ?

[AnnoyingTechnology]

I definitely want to support Bootstrap 5 and offer a version without jQuery as a dependency. I've already begun removing jQuery code and replacing it with native JS where possible. It'll be much easier to support/maintain once IE < 11 support is dropped, since we won't be as limited and will be able to remove most of the polyfills. I'm thinking that might be a more realistic goal for bootstrap-select v3.0.0, though.

Originally posted by @caseyjhol in #2228 (comment)

[caseyjhol]

Making this the thread to discuss Bootstrap 5 support.

[ghost]

Do you plan add suopport bootstrap 5?

[AnnoyingTechnology]

Please do not spam the maintainer.
It's better practice to react to the original question (thumbs) if you want to manifest an interest.

[ldcxtu]

bootstrap 5 needs you

[ldcxtu]

There was an issue retrieving Bootstrap's version. Ensure Bootstrap is being loaded before bootstrap-select and there is no namespace collision. If loading Bootstrap asynchronously, the version may need to be manually specified via $.fn.selectpicker.Constructor.BootstrapVersion. TypeError: Cannot read property 'Constructor' of undefined
at S.fn.init.Plugin [as selectpicker] (bootstrap-select.js:3413)

[caseyjhol]

Yes, I'm working on this. twbs/bootstrap#30267 is causing me some issues currently, as I can't add a click listener to the button.

[samihoda]

Eagerly awaiting BS5 support!

[vlatro]

I would also really like bootstrap 5 support. Had to disable the bootstrap-select for now :(

[Gritmatch]

Same here!

[cal-zone]

Commenting to subscribe to notifications ("watch") this issue.

Apologies if there is some other way to do so, but I couldn't figure it out.

[CaFlow]

Eagerly waiting for bootstrap 5 support. Had to also disable the bootstrap-select :(

[luciminea]

Hi guys !

Untill the new version is out, you can use the CSS for the Bootstrap 5 version and the JS for the 4.6. That will ensure the bootstrap-select is working.

I've just tested that ! Hope it helps you.

[chrisvanmeer]

Hi guys !

Untill the new version is out, you can use the CSS for the Bootstrap 5 version and the JS for the 4.6. That will ensure the bootstrap-select is working.

I've just tested that ! Hope it helps you.

For me that breaks my navbar dropdowns.

[luciminea]

Hi guys !
Untill the new version is out, you can use the CSS for the Bootstrap 5 version and the JS for the 4.6. That will ensure the bootstrap-select is working.
I've just tested that ! Hope it helps you.

For me that breaks my navbar dropdowns.

Yeap, some things will happen as the JS will no longer match the CSS. I'm not using too much of the Bootstrap JS, or dynamic elements, only the grid and general CSS. I preffer to build my own responsive navigation and modals.

[caseyjhol]

This is close, but I'm unable to add click events on the button until twbs/bootstrap#30267 is resolved.

[DJScias]

Seems a PR (twbs/bootstrap#33442) fixing it has been merged, so that's good news at least.

[caseyjhol]

Released in v1.14.0-beta2! jQuery is still required. You must use Bootstrap v5.0.0-beta3 or later.

[Joshdw]

Released in v1.14.0-beta2! jQuery is still required.

Hey Casey, just some small fix to support BS5's modal:

1162: change to

'<button type="button" class="btn-close" aria-hidden="true"></button>' +

Simply change class from close to btn-close and remove ×

Cheers thanks for fixing it for BS5!

[chrisvanmeer]

Sorry, but don't work with bootstrap 5 :(

Doesn’t seem to work for me either.

[luis-fss]

Released in v1.14.0-beta2! jQuery is still required. You must use Bootstrap v5.0.0-beta3 or later.

bootstrap-select v1.14.0-beta2 does not show drop-down options using keyboard navigation (no mouse click) with Bootstrap v5.1.3: https://plnkr.co/edit/53lQjla5NiVGPuL0?preview
Works on Bootstrap v5.0.2

Oh, sorry! There is already an issue about this: #2665

[Kondzolko]

Hello everyone and want to say thank you for your js library, I'm not sure if I'm on the right place but I would like to report one 1 bug with groups selectpicker.

Options for groups generated from the first group.

So if we will have options like this

<optgroup label="Fruit">
  <option>Apple</option>
  <option>Orange</option>
</optgroup>

<optgroup label="Vegetable">
  <option>Corn</option>
  <option>Carrot</option>
</optgroup>
   

We will don't see options 'Corn' and 'Carrot'.

https://plnkr.co/edit/vZ9xghMuDhHFJKMc?preview

I Will be appreciative if somebody can take a look at that, I also will try to see if I can fix this problem and will share with you a solution if I will find it.

Thanks

[Kondzolko]

Hello everyone and want to say thank you for your js library, I'm not sure if I'm on the right place but I would like to report one 1 bug with groups selectpicker.

Options for groups generated from the first group.

So if we will have options like this

<optgroup label="Fruit">
  <option>Apple</option>
  <option>Orange</option>
</optgroup>

<optgroup label="Vegetable">
  <option>Corn</option>
  <option>Carrot</option>
</optgroup>
   

We will don't see options 'Corn' and 'Carrot'.

https://plnkr.co/edit/vZ9xghMuDhHFJKMc?preview

I Will be appreciative if somebody can take a look at that, I also will try to see if I can fix this problem and will share with you a solution if I will find it.

Thanks

I found where is the problem.
For Some reason we all the time sent index 0 'StartIndex'

the problem in line 1770 in this code
addOptgroup.call(this, startIndex, selectOptions);

please replace to
addOptgroup.call(this, i, selectOptions);

An example of code you can find here:
https://plnkr.co/edit/amuqKRkRe829UEVC?preview

[farhadmammadli]

For anyone looking for cdn hosted file with fix applied (tested with bootstrap 5.0.1):
https://cdn.jsdelivr.net/gh/farhadmammadli/bootstrap-select@main/js/bootstrap-select.min.js
(thanks to @sjamestasc)

[kibblewhite]

For anyone looking for cdn hosted file with fix applied (tested with bootstrap 5.0.1): https://cdn.jsdelivr.net/gh/farhadmammadli/bootstrap-select@main/js/bootstrap-select.min.js (thanks to @sjamestasc)

That is working for me, thanks.

[fabienwnklr]

Hi , any progress on version 1.14 stable ? Thanks 😄

[NicolasCARPi]

@fabienwnklr I'm working on it yes.

[cspeer]

Hi @NicolasCARPi any chance we can speed things up a little? I know this probably isn't your main concern right now, but apparently a lot of people depend on it. I'm willing to throw in a 100 Euro donation and maybe someone else would like to chip in as well?

[NicolasCARPi]

Hello @cspeer, you're correct, it's not my main concern, but it's still on my radar. The thing is that I started hacking the code and removing old IE hacks so code gets more fluid and easier to grasp/fix bugs, but @caseyjhol wanted to keep IE support for the time being (and he is right, as it's a breaking change). I really want to push for more frequent updates, to keep the ball rolling, but I'm not in charge here, see #2228 (comment).

Maybe @caseyjhol can reconsider releasing a beta even without the fix he's working on? (after all, it is a BETA).

If money is burning your hand, know that donations are appreciated ;)

But I can't ensure anything, as I don't have all the cards in hand.

[therealsujitk]

@cspeer just thought I'd let you know, I use both bootstrap 5 and 4 together, 5 for most of my site, 4 only for bootstrap-select and it seems to work perfectly. I tried the beta version with bootstrap 5 but it had bugs that would've affected users if I had pushed it to production, so I decided to use the stable version with bootstrap 4 instead. Node.js allows you to use multiple versions of the same package.

[cspeer]

@NicolasCARPi Thanks for the speedy reply. I'd definitely be in favour of releasing a new beta ;) but for the time being, is there a dev branch that I could try? I didn't find one.

@therealsujitk Interesting idea. But if I'm understanding correctly, you'd use bs4 instead of bs5 on pages that require bs-select, right? I don't think that would work for me though, as the rest of the site very much depends on bs5. Switching to bs4 just on that one page, would break functionality, I'm afraid. Thanks though!

[therealsujitk]

But if I'm understanding correctly, you'd use bs4 instead of bs5 on pages that require bs-select, right?

Basically bootstrap 5 CSS + bootstrap 5 JS + bootstrap 4 JS (In that order). In our case, we have a single page. This might have conflicts, not sure, but in our case it didn't.

Bootstrap 5 is imported here and Bootstrap 4 JS is imported here.

[fabienwnklr]

sorry to insist.. but any progress ? :) i can contribute if necessary.. good luck :)

[hmtpandya]

@caseyjhol Is there any progress or update on Bootstrap 5 support? Can you please help with this?

[luanmarangon]

Para quem procura arquivo cdn hospedado com correção aplicada (testado com bootstrap 5.0.1): https://cdn.jsdelivr.net/gh/farhadmammadli/bootstrap-select@main/js/bootstrap-select.min.js (obrigado para@sjamestasc)

Thank you, working perfectly for me

[wings77]

este es un selec2 sin ajax se ve bien en boostrap5

este es un select5 con ajax, con bootstrap5 pierde el stilo y se reusa a ser responsive de resto funciona bien el buscado y lo demas

se desborda del navegador

[steven7mwesigwa]

@caseyjhol It isn't working for me using Bootstrap v5.2.2 and jQuery v3.6.1

The dropdown list doesn't show.

DEMO LINK: https://jsfiddle.net/theAccountant/baf17pys/3/

<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" /> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/2.0.0-beta1/css/bootstrap-select.min.css" />
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/js/bootstrap.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/2.0.0-beta1/js/bootstrap-select.min.js"></script>

[chadwtkns]

@steven7mwesigwa did you ever get this working?

[Madlhawa]

Just checking in to see if there's any update on bootstrap5 support.

[cb-eli]

@caseyjhol It isn't working for me using Bootstrap v5.2.2 and jQuery v3.6.1

The dropdown list doesn't show.

DEMO LINK: https://jsfiddle.net/theAccountant/baf17pys/3/

<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" /> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/2.0.0-beta1/css/bootstrap-select.min.css" />
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/js/bootstrap.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/2.0.0-beta1/js/bootstrap-select.min.js"></script>

I have the same problem, Does anyone know how to make it work?

[gian1200]

You should use v1.14.0-beta3

[nwalters512]

It's highly misleading that the README states "Now with Bootstrap 5 support" despite the latest tag on npm, all of the "version" badges on the README, and the latest release highlighted by GitHub not supporting this. Is there any chance of getting an official 1.14.0 version published?

[NicolasCARPi]

@nwalters512 It's unlikely this project will see another release. I've switched to https://tom-select.js.org/ with my project.

[liamkeily]

I switched to https://github.com/Choices-js/Choices

[mattymatty76]

Have you tried this version?
bootstrap-select-v1.14.0-gamma1
https://gist.github.com/mattymatty76/c996d3b77f298b2ec133be59992df9d4

[buzz100]

I switched to https://github.com/Choices-js/Choices

I think switching to another solution is the right thing todo, as I believe this project is very dead and has been for a long time.
Even if the beta fixs the issue, theirs a good chance that it will break with future bootstraps and never be fixed.

If I am wrong and the project is not dead, then could you please let me know the current status of the project?

Even if this is abandoned, it a big undertaking to create and maintain code like this for free, so I would like to thank the author for their work.

[arlenreyb]

It's a real shame if this is dead, because as far as I can tell, it's the only multi-select on the entire internet that has the
data-selected-text-format="count > 3"
option, and actually displays all the choices on one line without disrupting the layout.

Every other multi-select I've seen uses badges or buttons, and seemingly doesn't care about the use case of more than 4 things being selected at once.

My use case is a multiselect with 50+ options, and by default they are all selected. It's used as a filter, and by default the setting is "all options shown." If I were to use any of the alternatives, like Choices, Select2, Tom Select, or Slim Select, I would have 50+ little badges pushing my layout down several lines. Per each instance.

I'll stick with bootstrap-select, and hope for the best. If I had an indication the dev was around and still interested in working on this awesome plugin, I'd absolutely throw my wallet at him.