Bootstrap 5 support #2505

pchaganti · 2020-07-24T09:11:11Z

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

The text was updated successfully, but these errors were encountered:

caseyjhol · 2020-07-24T14:53:33Z

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 · 2020-10-28T10:58:17Z

@caseyjhol are there any plans to support Bootstrap 5 ?

AnnoyingTechnology · 2020-11-09T09:24:24Z

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 · 2020-12-02T00:59:44Z

Making this the thread to discuss Bootstrap 5 support.

ghost · 2020-12-10T07:07:34Z

Do you plan add suopport bootstrap 5?

AnnoyingTechnology · 2020-12-10T07:27:49Z

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 · 2020-12-23T10:31:52Z

bootstrap 5 needs you

ldcxtu · 2020-12-27T02:58:08Z

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 · 2021-01-06T00:42:44Z

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 · 2021-01-09T22:00:44Z

Eagerly awaiting BS5 support!

vlatro · 2021-01-18T12:59:15Z

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

Gritmatch · 2021-01-19T03:40:07Z

Same here!

cal-zone · 2021-01-27T23:01:19Z

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 · 2021-02-07T15:27:52Z

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

luciminea · 2021-02-07T15:37:40Z

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 · 2021-02-07T18:34:23Z

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 · 2021-02-07T18:38:10Z

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 · 2021-02-07T22:19:14Z

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

DJScias · 2021-03-24T22:10:33Z

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

caseyjhol · 2021-03-26T02:19:16Z

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

Joshdw · 2021-03-26T17:53:26Z

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 · 2021-03-27T13:22:38Z

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

Doesn’t seem to work for me either.

luis-fss · 2021-10-24T21:43:46Z

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 · 2021-10-26T23:14:21Z

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 · 2021-10-26T23:51:49Z

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 · 2021-11-02T07:30:50Z

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 · 2021-11-03T00:00:38Z

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 · 2021-11-05T15:09:23Z

Hi , any progress on version 1.14 stable ? Thanks 😄

NicolasCARPi · 2021-11-26T22:22:43Z

@fabienwnklr I'm working on it yes.

cspeer · 2022-02-10T11:07:13Z

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 · 2022-02-10T11:39:58Z

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 · 2022-02-10T11:47:10Z

@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 · 2022-02-10T12:50:43Z

@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 · 2022-02-10T13:01:56Z

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 · 2022-03-09T15:59:19Z

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

hmtpandya · 2022-07-01T08:15:43Z

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

luanmarangon · 2022-12-18T13:23:49Z

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 · 2023-05-05T15:15:12Z

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 · 2023-06-22T11:41:29Z

@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 · 2023-10-25T22:34:38Z

@steven7mwesigwa did you ever get this working?

Madlhawa · 2024-05-01T14:37:53Z

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

cb-eli · 2024-05-29T13:45:42Z

@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 · 2024-07-25T05:49:34Z

You should use v1.14.0-beta3

nwalters512 · 2024-08-12T22:17:36Z

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 · 2024-08-12T22:57:58Z

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

liamkeily · 2024-09-20T17:37:55Z

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

mattymatty76 · 2024-09-21T06:44:14Z

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

buzz100 · 2024-09-22T11:30:07Z

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.

pchaganti added the bug label Jul 24, 2020

caseyjhol added this to the v2.0.0 milestone Dec 2, 2020

caseyjhol pinned this issue Dec 2, 2020

caseyjhol changed the title ~~Bootstrap5 error~~ Bootstrap 5 support Dec 2, 2020

caseyjhol mentioned this issue Dec 2, 2020

Selectpicker not working with new Bootstrap 5 #2547

Closed

caseyjhol mentioned this issue Dec 10, 2020

Bootstrap 5 compatibility #2553

Closed

caseyjhol mentioned this issue Feb 22, 2021

Cannot read property 'Constructor' of undefined - bootstrap 5 #2575

Closed

caseyjhol closed this as completed Mar 26, 2021

radimvaculik mentioned this issue Oct 1, 2021

[7.x] 🎨 Bootstrap 5 support contributte/datagrid#946

Open

Kondzolko mentioned this issue Oct 27, 2021

Selector for Options #2672

Closed

jonatanschroeder mentioned this issue Aug 12, 2024

Upgrade to Bootstrap 5 PrairieLearn/PrairieLearn#10095

Merged

12 tasks

aanish27 mentioned this issue Nov 4, 2024

Fixed the filer dropdown aanish27/employee-profile-manager#97

Merged

Bootstrap 5 support #2505

Bootstrap 5 support #2505

Comments

pchaganti commented Jul 24, 2020

caseyjhol commented Jul 24, 2020 • edited Loading

AnnoyingTechnology commented Oct 28, 2020

AnnoyingTechnology commented Nov 9, 2020

caseyjhol commented Dec 2, 2020

ghost commented Dec 10, 2020

AnnoyingTechnology commented Dec 10, 2020 • edited Loading

ldcxtu commented Dec 23, 2020

ldcxtu commented Dec 27, 2020

caseyjhol commented Jan 6, 2021 • edited Loading

samihoda commented Jan 9, 2021

vlatro commented Jan 18, 2021

Gritmatch commented Jan 19, 2021

cal-zone commented Jan 27, 2021

CaFlow commented Feb 7, 2021

luciminea commented Feb 7, 2021

chrisvanmeer commented Feb 7, 2021

luciminea commented Feb 7, 2021

caseyjhol commented Feb 7, 2021

DJScias commented Mar 24, 2021 • edited Loading

caseyjhol commented Mar 26, 2021 • edited Loading

Joshdw commented Mar 26, 2021 • edited Loading

chrisvanmeer commented Mar 27, 2021

luis-fss commented Oct 24, 2021 • edited Loading

Kondzolko commented Oct 26, 2021

Kondzolko commented Oct 26, 2021 • edited Loading

farhadmammadli commented Nov 2, 2021 • edited Loading

kibblewhite commented Nov 3, 2021

fabienwnklr commented Nov 5, 2021

NicolasCARPi commented Nov 26, 2021

cspeer commented Feb 10, 2022 • edited Loading

NicolasCARPi commented Feb 10, 2022

therealsujitk commented Feb 10, 2022

cspeer commented Feb 10, 2022 • edited Loading

therealsujitk commented Feb 10, 2022

fabienwnklr commented Mar 9, 2022

hmtpandya commented Jul 1, 2022

luanmarangon commented Dec 18, 2022

wings77 commented May 5, 2023 • edited Loading

steven7mwesigwa commented Jun 22, 2023

chadwtkns commented Oct 25, 2023

Madlhawa commented May 1, 2024

cb-eli commented May 29, 2024

gian1200 commented Jul 25, 2024

nwalters512 commented Aug 12, 2024

NicolasCARPi commented Aug 12, 2024

liamkeily commented Sep 20, 2024

mattymatty76 commented Sep 21, 2024 • edited Loading

buzz100 commented Sep 22, 2024 • edited Loading

caseyjhol commented Jul 24, 2020 •

edited

Loading

AnnoyingTechnology commented Dec 10, 2020 •

edited

Loading

caseyjhol commented Jan 6, 2021 •

edited

Loading

DJScias commented Mar 24, 2021 •

edited

Loading

caseyjhol commented Mar 26, 2021 •

edited

Loading

Joshdw commented Mar 26, 2021 •

edited

Loading

luis-fss commented Oct 24, 2021 •

edited

Loading

Kondzolko commented Oct 26, 2021 •

edited

Loading

farhadmammadli commented Nov 2, 2021 •

edited

Loading

cspeer commented Feb 10, 2022 •

edited

Loading

cspeer commented Feb 10, 2022 •

edited

Loading

wings77 commented May 5, 2023 •

edited

Loading

mattymatty76 commented Sep 21, 2024 •

edited

Loading

buzz100 commented Sep 22, 2024 •

edited

Loading