Search code examples
jqueryjquery-select2jquery-select2-4

Select2 v4.1 - search not updating correctly?

I'm currently using JQuery and Select2 within a webapp at work, I have some experience of using JQuery but this is my first time using Select2. Whilst I can't share the actual project code, I have replicated the issue I am having in this really simple example here:

var data = [1, 2, 3, 4, 5];
$("#search").select2({
  data: data,
  closeOnSelect: false
});
<!-- JQuery 3.5.1 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Select2 4.1.0 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div id="search"></div>

As you would expect, this produces the following dropdown with search functionality:

enter image description here

Now the problem comes when trying to select any of the options. There are 2 issues:

  1. Selecting an option is for some reason permanent, e.g. if I select 3, then select 2, option 3 remains greyed out and can't be reselected

  2. Selecting options below the current option don't show up in the select2 bar, e.g. if I select 3, then select 2, the 3 in the top bar changes to 2, but if I then select 4, the top bar remains at 2 even though 4 is shown as selected in the dropdown

I would really appreciate any help because I really don't understand why this is happening and I haven't seen anyone else share any similar experiences. I have put the above code into a jsfiddle link here: https://jsfiddle.net/bpaeqnts/

Can someone please explain what's going on? Thanks!

Solution

  • Dont´t use a div. Use <select id="search"></select> instead.