Multiple Select Element loses focus after first select

Is this a bug?
#1

I think this worked in a previous version, but I’m not sure.

After selecting the first element in a multiple select, it becomes unfocused – not even the next field. returns back to the select element, but previously the focus stayed on that element.

I put together a demo site showing this:

select2 demo on heroku

(It’s a free heroku dyno, may take several seconds to start).

Configuration is pretty much out of the box, a bunch of data attributes on the select element.

select id=“single_select_form_countries” class=“js-select2 select2entity form-control select2-hidden-accessible” data-ajax–url="/country_autocomplete.json?page_limit=10"
data-ajax–cache=“false”
data-ajax–cache-timeout=“1”
data-ajax–delay=“0”
data-ajax–data-type=“json”
data-language=“en”
data-minimum-input-length=“1”
data-placeholder=“Select Multiple Countries”
data-page-limit=“10”
data-scroll=“false”
data-autostart=“true”
data-name=“countries”
multiple=""
data-allow-clear=“true”
data-select2-id=“single_select_form_countries”

and the javascript is a simple init, since the data tags have everything needed.

$(’.js-select2’).select2({});

Thanks.

#2

Your demo doesn’t work for me—typing in the Select2s doesn’t produce any results—and since you (or Hiroku—I’m not familiar with this service) are using some kind of JS “build” file, I can’t tell which version of Select2 you’re using, nor can I step through your code. I can see that the browser console logs an initialization message, and the Network tab shows the AJAX response, but it contains no data.

If you can fix these issues, I can try to help you figure out this issue.