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

When I click on drop down i got a list with search text fields. But I my cursor not focused on search text fields.
enter image description here

<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…!!!!!

0

If jQuery 3.6.0 is causing this you can use this:

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

5

Try this

$(document).on('select2:open', (e) => {
    const selectId = e.target.id

    $(".select2-search__field[aria-controls="select2-" + selectId + "-results"]").each(function (
        key,
        value,
    ){
        value.focus();
    })
})

1

Tested and worked with jQuery 3.6.0:

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

2

This issue can be resolve by using the setTimeout() fucntion to delay the focus() execute time, we can achieve this by modifying a function in select2.js at line #3321

container.on('open', function () {
  self.$search.attr('tabindex', 0);
  //self.$search.focus(); remove this line
  setTimeout(function () { self.$search.focus(); }, 10);//add this line

});

1

For NPM or Laravel: As I rely on NPM package manager in my Laravel Application, I had to revert jQuery from 3.6 to 3.5.1 in package.json, then run npm install and npm run prod. Then the problem is fixed.

"jquery": "^3.6.0" -> "jquery": "3.5.1",

Just add a custom line of jQuery after you call the select2 function to force focus to the specific search field. Just replace ‘#target’ with the ID of the search inputfield.

$( "#target" ).focus();

3

$(document).on('select2:open', (e) => {
    var c = e.target.parentElement.children
    for (var i = 0; i < c.length; i++) {
        if (c[i].tagName === 'SPAN') {
            c = c[i].children
            break
        }
    }
    for (var i = 0; i < c.length; i++) {
        if (c[i].tagName === 'SPAN' && c[i].className === 'selection') {
            c = c[i].children
            break
        }
    }
    for (var i = 0; i < c.length; i++) {
        c = c[i]
    }

    $(
        ".select2-search__field[aria-controls="select2-" +
            c.getAttribute("aria-owns').replace('select2-', '').replace('-results', '') +
            "-results']",
    ).each(function (key, value) {
        value.focus()
    })
})

The method in this answer broke in iOS/iPadOS 15.4.

A working alternative is listening for the click event on the parent directly and firing focus from there:

document.querySelector("#your-select-field-id").parentElement.addEventListener("click", function(){
    const searchField = document.querySelector('.select2-search__field');
    if(searchField){
        searchField.focus();
    }
});

1

I resolved for a web app like this

 $(document).on('select2:open', '.select2', function (e) {
    setTimeout(() => {
        const $elem = $(this).attr("id");
        document.querySelector(`[aria-controls="select2-${$elem}-results"]`).focus();
    });
});

This how i fix globally

$(document).on('select2:open', (e) => {
        const selectId = e.target.id;
        $(".select2-search__field[aria-controls="select2-"+selectId+"-results"]").each(function (key,value,){
            value.focus();
        });
    });