Select2 4.0 - Keypress does not trigger selection

Question

I've upgraded Select2 from version 3.5.2 to version 4.0.

We have plenty of forms with many fields filled in by typists.

In the old version ( 3.5.2 ) the typists would use the following sequence:

1. Focus on the element
2. Type a number
3. Press Tab to both select the result and move on to the next field

 $("select").select2(); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script> <style> input { display:block; margin:10px 0; } </style> <input type=text/> <select> <option value="1">1. Option A</option> <option value="2">2. Option B</option> <option value="3">3. Option C</option> <option value="4">4. Option D</option> <option value="5">5. Option E</option> </select> <input type=text/> 

On version 4.0 the typists must:

1. Focus on the element
2. Hit Enter
3. Type the number
4. Press Enter again
5. Press tab to blur and move to the next field

 $("select").select2(); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> <style> input { display:block; margin:10px 0; } </style> <input type=text/> <select> <option value="1">1. Option A</option> <option value="2">2. Option B</option> <option value="3">3. Option C</option> <option value="4">4. Option D</option> <option value="5">5. Option E</option> </select> <input type=text/> 

Is there a way around this apparent downgrade in functionality? I don't want to resort to v3.5.2 because I'm using AJAX on <select> elements which is not supported in this version (one must use hidden <input> tag instead)

Answer 1

To trigger the opening of select2 on focus use jQuery's native "focus" event & select2 "open" event. Important: Make it on DOM is ready.

 $( document ).ready(function() { $(".select2-selection").on("focus", function () { $(this).parent().parent().prev().select2("open"); }); });