Set focus to search text field when we click on select 2 drop down

Question

I am using select2.js Version: 3.4.3 with bootstrap I have one drop down.

When I click on drop down i got list with search text fields. But I my cursor not focused on search text fields.

<form:select path="yearAge" id="yearAgeId"
    cssClass="form-control search-select static-select">
    <form:option value="">Years</form:option>
    <c:forEach var="i" begin="1" end="125"  >
    <form:option value="${i}" label="${i}"></form:option>
    </c:forEach>     
</form:select>


$(".search-select.static-select").select2({
    placeholder: $(this).attr('placeholder'),
    allowClear: true
});

When I click on dropdown cursor focus should set to search text field automatically .

Thank you...!!!!!

Answer 1

If jQuery 3.6.0 is causing this you can use this:

 $(document).on('select2:open', () => {
    document.querySelector('.select2-search__field').focus();
  });

Answer 2

Tested and worked with jQuery 3.6.0:

$(document).on("select2:open", () => {
  document.querySelector(".select2-container--open .select2-search__field").focus()
})