Select2 V.4: Search box is not got focus on open

I using select2 for my project for the first time, and I thought I met many of my project requirements. However, one thing it was not is on their search box.

When I click on select2 element, the dropdown was opened but I could not type anything in their input box unless I click on their search.

Here is my sample code:

$(document).ready(function() {
  $('.js-example-basic-single').select2({
    width: 370
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

By inspecting issue console, it did not show any related issues at all, why it did not work well as expected ? Please kindly help, thanks.

Answer

Dear there is a conflict in jquery 3.5.X with select2, I have added one small fix, kindly use the below jquery code in order to fulfill your requirement.

$(document).ready(function() {
  $('.js-example-basic-single').select2({
    width: 370
  });       
});
$(document).on('select2:open', () => {
    document.querySelector('.select2-search__field').focus();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

Advertisement

Answer