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

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

enter image description here

When I click on drop down i got 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...!!!!!

jqueryhtmltwitter-bootstrapjquery-select2


Solution 1:[1]

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

});

Solution 2:[2]

If jQuery 3.6.0 is causing this you can use this:

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

Solution 3:[3]

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();
    })
})

Solution 4:[4]

Tested and worked with jQuery 3.6.0:

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

Solution 5:[5]

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",

Solution 6:[6]

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();

Solution 7:[7]

$(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()
    })
})

Solution 8:[8]

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();
    }
});

Solution 9:[9]

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();
    });
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 YOusaFZai
Solution 2 marc_s
Solution 3 Anant Kumar Singh
Solution 4 Khribi Wessim
Solution 5 riekelt
Solution 6 Sven Koschnicke
Solution 7 Anant Kumar Singh
Solution 8 robske_110
Solution 9 AmitV

Related Questions