Bootstrap-select: 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 https://github.com/snapappointments/bootstrap-select/issues/2228#issuecomment-476328158_

[caseyjhol]

Making this the thread to discuss Bootstrap 5 support.

[28492]

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)

[Machou]

i have migrated my website to BS5, any chance to get an update of BS Select to support ?

[caseyjhol]

Yes, I'm working on this. https://github.com/twbs/bootstrap/issues/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.

[cvanmeer]

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 (https://github.com/twbs/bootstrap/pull/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.

[Machou]

Yeah thanks you !!

[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!

[Machou]

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

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

[cvanmeer]

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

Doesn’t seem to work for me either.

[caseyjhol]

Can you link me to an example of it not working? Ensure you are using Bootstrap v5.0.0-beta3. Versions prior to that will not work.

[Joshdw]

Definitely works for me, on bs5 beta 3.

Also can confirm the ajax plugin / addon also works :)

[cvanmeer]

Ensure you are using Bootstrap v5.0.0-beta3. Versions prior to that will not work.

I still had beta1, upgrading to beta3 fixed it! Thanks, you're a life saver!

[Machou]

Yes : https://codepen.io/Machou/pen/dyNMGEm

CSS

Bootstrap 5 - beta 3
bootstrap-select 1.14.0 - beta 2

JavaScript

popper.js 2.9.1
jQuery 2.6.0
Bootstrap 5 - beta 3
bootstrap-select 1.14.0 - beta 2

[Joshdw]

Yes : https://codepen.io/Machou/pen/dyNMGEm

CSS

Bootstrap 5 - beta 3
bootstrap-select 1.14.0 - beta 2

JavaScript

popper.js 2.9.1
jQuery 2.6.0
Bootstrap 5 - beta 3
bootstrap-select 1.14.0 - beta 2

Why does your Pen use BS5 Beta 2?

Beta 3 is needed

[Machou]

How god, ok, now good , thanks =)

[leonbotros]

I'm getting a bootstrap is undefined error in https://github.com/snapappointments/bootstrap-select/blob/v1.14-dev/js/bootstrap-select.js#L601. I must be doing something wrong. On versions:

"bootstrap": "^5.0.0-beta3",
"bootstrap-select": "1.14.0-beta2"

Anyone have an idea?
Edit: fixed with: const bootstrap = window.bootstrap = require('bootstrap');

[cedricbonhomme]

It does not work.

I am not using jQuery and I've tested with document.getElementsByClassName and document.getElementById.

My dependencies are:

  "dependencies": {
    "@popperjs/core": "^2.9.1",
    "bootstrap": "^5.0.0-beta3",
    "bootstrap-select": "^1.14.0-beta2",
    "fork-awesome": "^1.1.7",
    "moment": "^2.29.1"
  },

[Joshdw]

I am not using jQuery

That's because Bootstrap-select still needs jQuery, even though BS5 doesn't.

[cedricbonhomme]

I am not using jQuery

That's because Bootstrap-select still needs jQuery, even though BS5 doesn't.

OK, thank you!

[kursadcayir]

Hi,
<select class="selectpicker" data-title="select Title"> <option title="t1" value="1">OPTION1</option> <option title="t2" value="2">OPTION2</option> <option title="t3" value="3">OPTION3</option> <option title="t4" value="4">OPTION4</option> </select>
I created that HTML and put it on my screen, until now I am using selectpicker with bootstrap5 with no problem but this not work like the explanation in the docs about title option.
Thanks in advance

[dugi07]

Hi guys,
Have anyone have error like my ?

Bootstrap 5.0.1
bootstrap-select-1.14.0-beta2
jquery-3.3.1

[jbs7]

Hi, I found that Select Picker Search is not taking any input
I'm using BSv5 with Bootstrap-select v1.14.0-beta2
Everything is fine except that I cannot type in the search input box...

[RodrigoCanoM]

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]

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]

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]

bootstrap-select.txt

See lines 1771 and 1772

[cvanmeer]

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

[luciminea]

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.

[cvanmeer]

bootstrap-select.txt

See lines 1771 and 1772

That did the trick, thanks a lot!