Select2 search input gains and then loses focus as soon as dropdown opens

Is this a bug?
#1

Hi everyone,

I am really hoping someone can help out with this as it has been driving me nuts for the last week and a half.

We upgraded to the new select2 ver4. Now when we try to use our select2 dropdowns they open up and the focus goes into the search input but then immediately it loses focus and goes back to the original select element and not select2. However, the select2 dropdown is still showing.

I’m going to try and record my screen so I can better show everyone what’s happening. But in the meantime has anyone ever experienced anything like this?

I can get it working just fine in a codepen by importing the packages and putting some simple HTML, but I can’t get it to work on my project without hitting the above described issue.

Any help would be greatly appreciated.

#2

Please post a code sample from your project along with the Codepen URL. Assuming the code is identical, the issue must lie in some difference between your project’s environment and Codepen’s. I’m wondering if perhaps a firewall rule is keeping the Select2 code from loading properly in your project environment. If possible, I’d like to try running your project code locally on my laptop to see if I encounter the same issue you’ve described.

A screen recording of the behavior would be helpful too. It’s odd that you mention that focus shifts to the underlying select control, since that should be hidden and removed from the focus order by the Select2 widget.

Also, do you observe this behavior in every browser, or just certain ones? Also, can other people replicate this issue on their computers, or is it just you who’s experiencing it?