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.

RodrigoCanoM · 2021-05-29T19:22:09Z

Error max-option
Bootstrap 5 v5.0.1
Bootstrap - select v1.14.0-beta2
jquery-3.5.1
Error Max-Options 2, selected 3

sjamestasc · 2021-06-11T10:45:37Z

There seems to be an issue with optgroups in v1.14.0-beta2

addOptgroup takes an index and the selectOtions

It is called from the loop for ( var len = selectOptions.length, i = startIndex; i < len; i++ ) {...

Rather than passing the loop variable as an index like this...
addOptgroup.call( this, i, selectOptions );

...it is called like this...
addOptgroup.call( this, startIndex, selectOptions );

...so if there are N optgroups in the raw select, the selectpicker will end up with N copies of optgroup[0], although it seems to get the optgroup label correct because I think item is scoped in the for loop and used in addOptgroup.

The above change was enough to fix it for us, although I am not sure if there are any knock-on effects from the change. It seems like it would be better to pass "item" to the addOptgroup function, or use
var config = {display: htmlEscape( dataGetter( optgroup, 'label' ) ),
instead of
var config = {display: htmlEscape( dataGetter( item, 'label' ) ),

I suspect this is a coding style choice I am not equipped to comment on though.

Other than this, it works great with BS5 from what we have seen.

luciminea · 2021-06-22T11:46:35Z

There seems to be an issue with optgroups in v1.14.0-beta2

addOptgroup takes an index and the selectOtions

It is called from the loop for ( var len = selectOptions.length, i = startIndex; i < len; i++ ) {...

Rather than passing the loop variable as an index like this...
addOptgroup.call( this, i, selectOptions );

...it is called like this...
addOptgroup.call( this, startIndex, selectOptions );

...so if there are N optgroups in the raw select, the selectpicker will end up with N copies of optgroup[0], although it seems to get the optgroup label correct because I think item is scoped in the for loop and used in addOptgroup.

The above change was enough to fix it for us, although I am not sure if there are any knock-on effects from the change. It seems like it would be better to pass "item" to the addOptgroup function, or use
var config = {display: htmlEscape( dataGetter( optgroup, 'label' ) ),
instead of
var config = {display: htmlEscape( dataGetter( item, 'label' ) ),

I suspect this is a coding style choice I am not equipped to comment on though.

Other than this, it works great with BS5 from what we have seen.

Can you provide a file with those modifications ? Or a few instruction on how to modify the source .js ?

sjamestasc · 2021-06-22T11:53:49Z

bootstrap-select.txt

See lines 1771 and 1772

chrisvanmeer · 2021-06-22T11:55:09Z

I would be interested in that too, just yeaterday I found the same “bug” with optgroups

luciminea · 2021-06-22T12:20:15Z

bootstrap-select.txt

See lines 1771 and 1772

I've opened it with Dreamweaver and for me it was line1718, but I've figured it out. I'm a programmer, but I don't do much work on JS, so I couldn't figure it out no matter how bad I've tried. I'm currently working ,like on the clock, on a project and I couldn't get pass this. I owe you a great deal, thanks again.

Here's the minified JS, for whomever needs it.
bootstrap-select.min.1.txt

Just change the extension to .js and you're good to go. Like sjamestasc said, don't know all the implications of this change, but I guess we'll figure it out.

chrisvanmeer · 2021-06-22T13:33:12Z

bootstrap-select.txt

See lines 1771 and 1772

That did the trick, thanks a lot!

liamkeily · 2021-09-06T14:19:14Z

As demonstrated here https://jsfiddle.net/p1gosxe8/2/ i was having some issues getting bootstrap-select working with Bootstrap 5.

To get it working correctly i had to:

Include specific dev branch in package.json (because the latest fixes are not tagged up, see git diff v1.14-dev v1.14.0-beta2):

"bootstrap-select": "snapappointments/bootstrap-select#v1.14-dev",

2 Include bootstrap and bootstrap-select like this:

const bootstrap = window.bootstrap = require('bootstrap'); // without this bootstrap-select crashes with `undefined bootstrap`
require('bootstrap-select/js/bootstrap-select'); // we have to manually require the working js file

By default the package.json tells node to use dist/js/bootstrap-select.js, but this file is broken (perhaps out of date?). Manually requiring the js/bootstrap-select.js gets around this.

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.

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

reckart mentioned this issue Jul 11, 2021

Bootstrap 5: anyone interested? martin-g/wicket-bootstrap#902

Closed

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

Bootstrap 5 support #2505

Bootstrap 5 support #2505

Comments

pchaganti commented Jul 24, 2020

caseyjhol commented Jul 24, 2020 • edited

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

ldcxtu commented Dec 23, 2020

ldcxtu commented Dec 27, 2020

caseyjhol commented Jan 6, 2021 • edited

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

caseyjhol commented Mar 26, 2021 • edited

Joshdw commented Mar 26, 2021 • edited

chrisvanmeer commented Mar 27, 2021

RodrigoCanoM commented May 29, 2021

sjamestasc commented Jun 11, 2021

luciminea commented Jun 22, 2021

sjamestasc commented Jun 22, 2021

chrisvanmeer commented Jun 22, 2021

luciminea commented Jun 22, 2021 • edited

chrisvanmeer commented Jun 22, 2021

liamkeily commented Sep 6, 2021

luis-fss commented Oct 24, 2021 • edited

Kondzolko commented Oct 26, 2021

Kondzolko commented Oct 26, 2021 • edited

farhadmammadli commented Nov 2, 2021 • edited

kibblewhite commented Nov 3, 2021

fabienwnklr commented Nov 5, 2021

NicolasCARPi commented Nov 26, 2021

cspeer commented Feb 10, 2022 • edited

NicolasCARPi commented Feb 10, 2022

therealsujitk commented Feb 10, 2022

cspeer commented Feb 10, 2022 • edited

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

steven7mwesigwa commented Jun 22, 2023

chadwtkns commented Oct 25, 2023

Madlhawa commented May 1, 2024

caseyjhol commented Jul 24, 2020 •

edited

AnnoyingTechnology commented Dec 10, 2020 •

edited

caseyjhol commented Jan 6, 2021 •

edited

DJScias commented Mar 24, 2021 •

edited

caseyjhol commented Mar 26, 2021 •

edited

Joshdw commented Mar 26, 2021 •

edited

luciminea commented Jun 22, 2021 •

edited

luis-fss commented Oct 24, 2021 •

edited

Kondzolko commented Oct 26, 2021 •

edited

farhadmammadli commented Nov 2, 2021 •

edited

cspeer commented Feb 10, 2022 •

edited

cspeer commented Feb 10, 2022 •

edited

wings77 commented May 5, 2023 •

edited