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 dropdown.

When I click on dropdown, I get a list with search text fields.

But I my cursor is 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, pointer focus should set to search text field automatically.

Kielce

Answer 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

});

Bode

This is correct answer either the page have one or multiple select2-select boxes.+1 – Mumps

Whether it works or not, this can't be the correct answer. Dist files should not be modified, and select2.js should not be used in production in favor of its minified version. Moreover line numbers are expected to change between each release so giving a line number without release version is pointless... – Gametophyte

Answer 2

If jQuery 3.6.0 is causing this you can use this:

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

Fanatical

Change the selector to input.select2-search__field when your using selects with the multiple flag. – Hockey

This saved me a lot of time. As this is likely an issue with the version combination of select2 and jQuery 3.6.0, chances are some future release will allow you to do this using just jQuery selectors again. I couldn't work out why jQuery selectors weren't working until I saw this answer, and found github.com/select2/select2/issues/5993#issuecomment-800927000 – Politesse

Small but useful improvement. It avoids issue with tags if (!event.target.multiple) { $('.select2-container--open .select2-search--dropdown .select2-search__field').last()[0].focus() } – Trombley

Its not working in case page have multiple select-2 select-boxes and you are switching betwwen them. – Mumps

This unfortunately broke for mobile safari in iOS / iPadOS 15.4. See my answer for an alternative. – Glomerulus

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

Ngocnguyen

This is the only solution for a page with a mix of single- and multi-select boxed. @hammad-ahmed-khan 's answer above is excellent when you only have single-select dropdowns but makes a mess of multi-select. This has to do with the way select2 only has one search box for all single-selects and reuses it for each dropdown, but multi-selects always have their search box visible. – Inebriant

Answer 4

Tested and worked with jQuery 3.6.0:

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

Proclamation

It is worked for me. My jQuery version is 3.6.0 and select2 version is 4.1.0-rc.0 – Inexpiable

works only if you have ONE select2 in the page – Drusilla

Answer 5

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

Torrie

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Interjection

Answer 6

Do not search for the element in the DOM. Instead, get the $search element directly from the instance that caused the select2:open event. Since the bug only occurs with single selects, you should also exclude multiple selects:

$(document).on('select2:open', e => {
    const select2 = $(e.target).data('select2');
    if (!select2.options.get('multiple')) {
        select2.dropdown.$search.get(0).focus();
    }
});

Brazilin

Answer 7

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

Glomerulus

And it also fixes the issue mentioned above by Anant Kumar Singh when working with many Select 2 on the same page. – Brucie

I agree with Apex. This solved two issues. This really should be the accepted answer at this point. – Powys

Answer 8

I try all suggestions from google and stackoverflow and spend 4 hours for that. Only what work is downgrade jQuery from 3.6 to 3.5

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

Just put this and save time

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js

Plasmodium

This worked... but now i'm curious what defect in jquery/select2 caused this :-) – Stinnett

finnaly and i don't wana know why tnx so much !!! – Vagarious

Answer 9

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

Sextan

Answer 10

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

Lengthwise

$(".search-select.static-select").select2(....); Above line call after page load (only once) But I need to focus when I click on Dropdown – Kielce

Add a click event to the select, when clicked add focus to the input field. $('select').click(function () { $( "#target" ).focus() }); – Lengthwise

I am not able to get target ,because it is created when i click on drop down – Kielce

Answer 11

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

Ngocnguyen

Answer 12

Another way to do it is:

// Find all existing Select2 instances
$('.select2-hidden-accessible')
    // Attach event handler with some delay, waiting for the search field to be set up
    .on('select2:open', event => setTimeout(
        // Trigger focus using DOM API
        () => $(event.target).data('select2').dropdown.$search.get(0).focus(),
        10));

NB: Trigger focus writing .get(0).focus() instead of .trigger('focus') (for using DOM API) because this wouldn't work with JQuery 3.6.0

Gametophyte

Answer 13

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

Prudhoe

Answer 14

Maybe this helps:

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

Openeyed