I hav this error with new beta, using bootstrap 4.

Cannot set property '_menu' of undefined

Im using last beta and last popper.js

I am using Angular 5 and Boostrap 4.
Installed boostrap-select v1.13.0-beta.
loading app shows below error.

I made sure that jQuery is being loaded before boostrap-select.js
When I use boostrap-select v1.12, it does not show this error, but dropdown is not working with this version.

bootstrap-select 1.13.0-beta, bootstrap 4

Opening a select in a navbar a second time (open -> close -> open) leads to the error
Uncaught TypeError: Cannot read property 'update' of null

Responsible code line
if (this.dropdown) this.dropdown._popper.update();

Live example

Update: From the bootstrap docs

Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.

The default CSS for an active item in the dropdown on Bootstrap 4 is "white", so consider to add this line to the css file:

.dropdown-item.active{color:#000;}

thanks.

When bootsrap bundle is loaded instead of popper.min.js you have to double click on menu to activate and then to be able to actually select an item.

Fiddle example

cdnjs/cdnjs#12521

bootstrap-select version : v1.13.1

Optgroup labels are escaped (ex: '&' is escaped to & ) and it is not the case on option text.

trouble line is 1162 because it use htmlEscape(label).

https://plnkr.co/edit/PWJVWdryHXJ2mPh1QATK?p=preview

Looks like actions box doesn't display when it is set to true. Actually, a few times it does seem to display (when refreshing the page), but it is rare. See the fiddle for an example.

Bootstrap 4.0
Bootstrap-select 1.13.0-beta

macOS 10.13.4
Safari 11.1

http://jsfiddle.net/t1m3Lxpg/26/

See snapappointments/bootstrap-select#862, snapappointments/bootstrap-select#1728.

Please see this Plunker: https://plnkr.co/edit/27bFFrsp1wBaUAowclhP

It is a simple bootstrap-select using bootstrap 4 and bootstrap-select v1.13.0-beta.

The background color of the select element is Athens Gray (#f8f9fa) It has no border, and the selected row color is blue. See images below.

How do I get the standard style from bootstrap 3 (https://silviomoreto.github.io/bootstrap-select/examples/)? Do I really need to do custom styling to get that?

select button doesn't inherit class="form-control-sm"

1. in Safari LiveSearch does not work
2. if there are several selectpiker on the page, then the LiveSearch focus remains on the latter, but it is necessary that the focus should be stylized when expanding select

The change introduced in snapappointments/bootstrap-select#1303, such that calling val() emits a change event, is inconsistent with common practice, and, at least in our case, induced a lot of breakage, as it tends to introduce events before handlers are ready for them.

I'm a bit puzzled as to the rationale for the change; val() doesn't typically work this way. As reference, from the canonical val() documentation, http://api.jquery.com/val/:

Setting values using this method (or using the native value property) does not cause the dispatch of the change event. For this reason, the relevant event handlers will not be executed. If you want to execute them, you should call .trigger( "change" ) after setting the value.

I think if something as basic as event behavior is going to be different from how it's worked in the past and different from common practice, there should be much more of a warning present in the change log.

However, frankly, it's not without good reason that that's not normally the way val() works, so again, I'm puzzled by what seems to be an odd choice here.

If I put bootstrap-select input inside a .dropdown-menu, I won't be able to choose anything from it; the options dropdown simply doesn't open on click. I am referring to that particular feature: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-forms

If I understand correctly, this issue is due to the fact that bootstrap4 doesn't support nested dropdowns (twbs/bootstrap#21026). If so, is there any workaround to make bootstrap-select usable in dropdown-menus?

I'm trying to empty the contents of a select dropdown menu and it seems like it only works when the first item is selected.

Here's the example

When the second or third value is selected in the dropdown and the button is pressed to empty the contents, it clears out the selection. However if you click on the dropdown again, all of the values are still there.

If the 1st value of the dropdown is selected and the button pressed, then it seems to work fine.

I'm using it with Thymleaf and Bootstrap 4.
I need to use it inside a modal, but it doens't appear..
Why?

I just tried this:

......
<div class="modal-body">
					<select id="lunchBegins" class="selectpicker" data-live-search="true" data-live-search-style="begins" title="Please select a lunch ...">
  <option>Hot Dog, Fries and a Soda</option>
  <option>Burger, Shake and a Smile</option>
  <option>Sugar, Spice and all things nice</option>
  <option>Baby Back Ribs</option>
  <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>

.....
</div>

I am migrating my old version to new boostrao 4 version and I found a issue.

When I add imagem using data-content the search stops to work

$select.append($('', { 'data-content': ' aaaa', value: 10 }));

http://jsfiddle.net/t1m3Lxpg/12/

I am using Bootstrap 4 with Pug (Using Bootstrap-select version 1.13.0 ), and my code is

                                    label Select A Category
                                    select.selectpicker(data-live-search='true')
                                        option a
                                        option ab
                                        option abc
                                        option abcd
                                        option abcde

Whenever I type in the box

All the related options are not showing and it shows the below messages:

may I know the reason for the new repository?

As Bootstrap 4 is now using SASS, it makes sense to switch to that to remain consistent. Support for LESS will be kept for as long as it makes sense. It will ultimately be necessary anyway once the bootstrap-select bundle files are available (bootstrap-select code bundled with necessary Bootstrap code - useful if you're not already using Bootstrap in your project).

See snapappointments/bootstrap-select#1876

While 'auto' width in the past has worked properly, resulting in a selector width equal to that of the widest option, it's not working now. This is visible in the examples in the documentation, where instead of being as wide as it needs to be, the select spans the full width of the container -- it's wider than any of the other width demos below it.

https://developer.snapappointments.com/bootstrap-select/examples/#styling

When clicking the dropdown, the browser's default gui is displayed instead. See the fiddle for an example.

Bootstrap 4.0
Bootstrap-select 1.13.0-beta

macOS 10.13.4
Safari 11.1

http://jsfiddle.net/t1m3Lxpg/26/

Bug:
The noneSelectedText isnt showing up at all.
It has worked in v.1.12.4.

How to reproduce the bug:
HTML:
<select class="btn-group form-control selectpicker m-0" data-show-subtext="true" data-selected-text-format="count" data-live-search="true" multiple="multiple"> <option value="" data-subtext="123" data-tokens="123"> 123 </option> <option value="" data-subtext="123" data-tokens="123"> 123 </option> <option value="" data-subtext="123" data-tokens="123"> 123 </option> <option value="" data-subtext="123" data-tokens="123"> 123 </option> </select>
JS:
$('.selectpicker').selectpicker({ size: 8.4, noneSelectedText: '<span class="placeholder">Choose multiple</span>', });

1.12.4 output is like this:
<button type="button" ... title="Choose multiple" ...><span class="filter-option pull-left"><span class="placeholder">Choose multiple</span></span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>

1.13.0 output is like this:
<button type="button" ... title ...><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner"></div></div> </div><span class="bs-caret"><span class="caret"></span></span></button>

So "Choose multiple" doesnt get set, nor in the title or the element itself inside the button.
Does somebody know how to fix this?

Currently, the input-group-prepend (input group addon) does not render correctly. It both is too small in width and maintains rounded corners on the side with the addon.

jQuery 3.1.1
Bootstrap 4.0.0
bootstrap-select 1.13.0-beta

Here is a live example that shows both a correctly and incorrectly displayed dropdown: https://jsfiddle.net/p3xe2753

In the current code base, I can see some popover-title classes, but, in Boostrap v4.0 this class has been changed to popover-header.

With Bootstrap 4, Glyphicons is no longer included as standard. As such, some have opted to use FontAwesome instead.

I know that the js automatically adds the "glyphicon" class when data-icon is used. Is there a cheat which will make it add the "fa" class instead? The new Fontawesome version also has fas and far classes for variations on the icons.

Environment

• jquery 3.3.1
• bootstrap 3.3.7
• bootstrap-select 1.12.4 / 1.13.0

JsFiddle

• 1.12.4: https://jsfiddle.net/jfcherng/uux33ge4/
• 1.13.0: https://jsfiddle.net/jfcherng/dho62rmk/

Screenshot

When 0 or 1 items are selected, the same "Nothing selected" text is displayed. After selecting a second item, then "2 items selected" is displayed.

Instead, when 1 item is selected, "1 item selected" should be displayed.

See the first dropdown under "Selected text format" in the documentation at this link: https://developer.snapappointments.com/bootstrap-select/examples/#selected-text-format

is it possible to have the width of the button based on the selected option?

I'm using the new bootstrap card with a bootstrap-select menu inside the body. When using CSS to change the color of the card's header text, the options in the dropdown disappear unless you hover over the options.
Fiddle here

Is it possible to make the selectpicker, act like a bootstrap dropdown when it expands within a navbar like so?

I wish to make a selectpicker vertical list when it is in mobile mode, so when you select a particular select, it expands inside the main parent and not overflows outside like it normally would.

Does that make sense, and if so, can it be tweaked to do so?

Originally reported by @mdczaplicki (snapappointments/bootstrap-select#1135 (comment)):

This is how it looks using BS4 and with these attributes: htmlAttributes: new { @class = "selectpicker", multiple = "multiple", data_width = "fit", title = "Select roles" }
Kinda too high I think. Also padding is broken IMO.

Removing "fit" makes it look good.

Demo: https://plnkr.co/edit/AYv6YSnrk5WwNgtSh6N0?p=preview

Hi,
Thank you for sharing bootstrap-select with the community.

I'm using the 1.13.0-beta version with bootstrap 4 and its validation.
https://jsfiddle.net/2cLc359h/28/

It works fine, but when new appended on select then it recognizes the select as valid also if any value is selected

See snapappointments/bootstrap-select#737.

Thanks for your work regarding Bootstrap-select.

I know Bower isn't the hottest thing anymore, but some build processes still depend on it.

Would you be willing to accept a PR adding support for Bower, via a bower.json?

{
  "name": "bootstrap-select",
  "description": "Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard select elements.",
  "main": [
    "less/bootstrap-select.less",
    "dist/css/bootstrap-select.css",
    "dist/js/bootstrap-select.js"
  ],
  "authors": [
    "Casey Holzer"
  ],
  "license": "MIT",
  "keywords": [
    "form",
    "bootstrap",
    "select",
    "replacement"
  ],
  "homepage": "https://developer.snapappointments.com/bootstrap-select",
  "dependencies": {
    "jquery": ">=1.8"
  },
  "ignore": [
    ".gitignore",
    "CONTRIBUTING.md",
    "Gruntfile.js",
    "README.md",
    "composer.json",
    "package.json",
    "test.html",
    "docs"
  ]
}

I woul like to use image beside text. I found this example Select with Thumbnails here.
But on your latest version 1.12.4 looking the source code this option is not available anymore. How can use images on latest version?

An option like

<option data-subtext="123">text</option>

will break live search with error Uncaught TypeError: j.toUpperCase is not a function

I fixed it by changing this line to

string = string.toString().toUpperCase();

DEMO: http://jsfiddle.net/mfrup5bL/238/
ENV: bootstrap-select v1.13.0 with BS4

1.12.4 is working perfectly.
1.13.0 doesnt work at all.

Steps to reproduce:
Update from 1.12.4 to 1.13.0 through bower:

bower update bootstrap-select

First Bug: Invalid meta desctiption of 1.13.0 (1.12.4 doesnt have this bug)

bower not-cached https://github.com/snapappointments/bootstrap-select.git#^1.13.0
bower resolve https://github.com/snapappointments/bootstrap-select.git#^1.13.0
bower download https://github.com/snapappointments/bootstrap-select/archive/v1.13.0.tar.gz
bower extract bootstrap-select#^1.13.0 archive.tar.gz
bower invalid-meta for:/var/folders/z1/5vz7njdx5qj2zjktbtgf81xm0000gn/T/username/bower/c225966f7f5f71e5c9bdec3a4c8b6550-73520-McjZ31/bower.json
bower invalid-meta The "description" is too long, the limit is 140 characters
bower resolved https://github.com/snapappointments/bootstrap-select.git#1.13.0
bower install bootstrap-select#1.13.0

Second Bug: Cant run 1.13.0 at all, because I get this error message:
TypeError: undefined is not an object (evaluating 't.fn.dropdown.Constructor.VERSION')

The error redirects me to the line:
b.full = (t.fn.dropdown.Constructor.VERSION || "").split(" ")[0].split("."), b.major = b.full[0];

Iam using Safari 11.1 on MacOS, Bootstrap 3.3.7, jQuery 2.2.4 and inserting the script through vendor.json:

"bower_components/bootstrap-select/dist/js/bootstrap-select.min.js",

Any thought on the second bug?
The whole plugin doesnt work without fixing it.

Currently, in a select with 4000 options, in Edge, "Select All" takes 20 seconds to select all options. Yes - 20 seconds. Chrome/Firefox take around 10ms.

So, it's hard to explain what my select options are doing, so I recorded a GIF. Basically, once I click an option, it is highlighted but never closed.

IGNORE THE MOUSE POSITION.

https://i.imgur.com/CJOqbQ0.gif

New-lines in options cause formatting issues.

Windows 10
IE 11 / Edge
VS 2017
Bootstrap 3.3.7
Bootstrap-select 1.12.4

https://plnkr.co/edit/nBiCB4xZAP8Be4wzpj9A?p=preview

You might say "don't put new lines in", but sometimes this happens during VS/Resharper auto formatting.

It should simply show the option selected. See snapappointments/bootstrap-select#1933

Bootstrap 4 comes with a caret icon already append via the :after. This version adds another caret via the 'bs-caret`. I use CSS to display: none for now.

First of all I would like to thank you guys for sharing this component with the community, I've used it in quite a few projects until now.

But a requirement of a project that I'm developing is to have a list of items selected/deselected in a similar way of a List View, so the options picker would always be displayed with the "ticker" mark to identify the selected ones, eliminating the <select> entirely.

I did not find any option related to this in the docs and before modifying the component I wondered if you guys would suggest any approach to achieve this requirement. The functionality of the component would be very similar to this one: https://google.github.io/closure-library/source/closure/goog/demos/ if you click "Gmail Bugs" or "Reference" the item will then be selected/deselected.

I found some snippets in Bootsnipp (like this one) but as bootstrap-select is wonderful I would prefer to use it instead of the Bootsnipp approach.

I don't know if this is the proper place to be asking questions but I would appreciate any suggestions.

Regards.