Bootstrap select dropdown items not synchronized with underlying native select options after dynamic add/remove and refresh from code

[yankarinRG]

When bootstrap select is initialized with a select without options, and the options are added and removed programmatically from the code, with the refresh method called to update the select, the elements of the dropdown created by bootstrap select are not synchronized with those of the select. In the example I attached, the select is initially empty.

Clicking on the "load" button should remove all select options and replaces them with new ones. In this case, bootstrap select will append them instead of replacing them (as in native select).

Clicking the "empty" button should remove all options. Here, bootstrap select will continue to display the previous ones, although all the options of the native select element have been removed.

Version used

• bootstrap-select at commit https://github.com/snapappointments/bootstrap-select/commit/04cc1fd5abedc85c449d159d9fa6ea48e2e4a2f7)
• bootstrap 5.1.3
• jquery 3.6.0

Minimal, Reproducible Example

https://jsfiddle.net/234vackd/2

[skiingdomo]

Hi,

Replaced your inline css and js with cdn hosted libraries, and then your code works:

https://jsfiddle.net/4gkv180d/

[yankarinRG]

Hello and thank you for the interest. So there was a regression between version 1.14.0-beta2 and commit https://github.com/snapappointments/bootstrap-select/commit/04cc1fd5abedc85c449d159d9fa6ea48e2e4a2f7? Or maybe I didn't compile the library correctly? I cloned the repository at the aforementioned commit point and then installed project's dependencies with npm install and built with grunt dist

[skiingdomo]

Hi mate,

No idea sorry. Im just looking into weather we use this beta on our new site and was concerned about this bug, as it is a well used use case on our site.

[kennysong]

I think our team has run into this bug as well. Sometimes (I wasn't able to isolate the conditions when this happens), calling .selectpicker('refresh') on the element won't actually refresh it after clearing the <select> and adding new <option>s dynamically.

Workarounds that seem to work for me:

• .selectpicker('destroy') followed by .selectpicker() (this fixes the JSFiddle)
• Calling .selectpicker('refresh') twice (this doesn't fix the JSFiddle, though)

[yankarinRG]

I am also using the workaround of calling selectpicker('destroy') and then selectpicker(), in the meantime of an official bug fix from the author. It's certainly not the most elegant and probably also optimized solution, but at least it works!

[fwiep]

I can confirm the issue is present in latest dev-tag. Using:

• bootstrap-select v1.14.0-beta3
• bootstrap 5.1.3
• jquery 3.6.0

@kennysong 's workaround of destroy and recreate works for me, too. Can I help in solving this issue?

Thanks, FWieP

[pahar0]

I can confirm the issue is present in latest dev-tag. Using:

• bootstrap-select v1.14.0-beta3
• bootstrap 5.1.3
• jquery 3.6.0

@kennysong 's workaround of destroy and recreate works for me, too. Can I help in solving this issue?

Thanks, FWieP

This workaround doesn't work for me using the same bootstrap-select, bootstrap and jQuery versions.

[loupid]

jayb611 commented good solution https://github.com/snapappointments/bootstrap-select/issues/2712#issuecomment-1106223165

[pedrorivotti]

Workarounds that seem to work for me:

• .selectpicker('destroy') followed by .selectpicker() (this fixes the JSFiddle)

One caveat is that events hooked into the select are lost with.selectpicker('destroy'). For example, in https://jsfiddle.net/u53japht/ the event that logs "Triggered" into the console upon selection stops working after hitting "Load" or "Empty". Yet another workaround could be to re-add the events, as in https://jsfiddle.net/3gbcusar/.

[datadimension]

any update on this bug fix, it seems quite a basic requirement to change the options dynamically (remove/add without duplication)

[scr4bble]

EDIT: my issue is a duplicate of https://github.com/snapappointments/bootstrap-select/issues/2445 Seems to be already fixed in v1.13.16

I am having similar issue - when dynamically replacing all options && preselecting one option in the new list $option.prop('selected', true), then calling .selectpicker('refresh') and getting this result:

• Text in the button changed to "Nothing selected" && color of this text changed from gray to black
• when dropdown is opened, I see the preselected option correctly highlighted

The issue isn't present in 1.13.12 Issue appeared after increasing version to 1.13.14

Could be related to this issue because it's also problem with "refresh". Calling refresh twice or calling refresh & then render solves the issue but I rather switched back to version 1.13.12