select2 force focus on page load

Question

I am trying to make a select2 box appear in its focused state on page load. I have tried the following:

$('#id').select2('focus');
$('#id').trigger('click');
$('#id').trigger('focus');

Only the first line seems to have any effect, and it does focus the select2 field, however it requires an additional keypress to display the search field, and to allow typing in search string.

Therefore, if you load the page and start typing: "Search", the "S" will open the search box and then the remainder of the keys will be entered into it, so you'll be searching "earch"

Gowrie

Answer 1

According to the Select2 documentation:

$('#id').select2('open');

Should be all you need.

Found under the Programmatic Access section in the documentation.

Flacon

$('#id').select2('open'); will set focus and open the select2 ready for search. $('#id').select2('focus'); will set the focus on select2 but not select2 will be not opened for search. – Phillie

As @AdrianP. said, it also opens it... And the focus option is not very visual: jsfiddle.net/mJEZK/13 – Caputto

Does not work with multiple – Conservancy

Answer 2

This works in release 3.4.2. Not sure when it was implemented exactly.

$('#id').select2('focus');

Concentre

I couldn't find this anywhere in the documentation! Thanks a lot for sharing this! – Kowloon

Works in 4.0 as well. Still undocumented. – Agamogenesis

Answer 3

If you use:

$('#id').select2('open');

The select2 is opened and you can type directly for searching.

If you use:

$('#id').select2('open').select2('close');

The focus is set to the created select2 dropdownlist. If you hit Enter or Ctrl + Arrow down on your keyboard, you can open it.

Is personally think this is better than:

$('#id').select2('focus');

because you can't really open the select2 dropdownlist with your keyboard.

Unkenned

Exactly the behavior I was looking for. Deserves more upvotes. – Degas

$('#id').select2('open').select2('close'); Has the bonus of working in select2 v4.0 when nothing else seems to. Thanks! – Lieabed

another solution is to directly set the focus on the created input element with $('.select2-search__field').focus(); – Quire

Answer 4

Select2 creates its own input, so try something like this:

$(window).load(function(){
  $('#id').prev('.select2-container').find('.select2-input').focus();
});

Beezer

Answer 5

This is what worked for me, and it also placed the blinking cursor in the input field. Order matters!

$('#s2id').select2('focus');
$('#s2id').select2('open');

Overcash

Answer 6

As described in https://forums.select2.org/t/search-being-unfocused/1203/10 focus is currently broken in the combination of Select2 4.x and JQuery 3.6.0

Two fixes: either downgrade to JQuery 3.5.1 or

// hack to fix jquery 3.6 focus security patch that bugs auto search in select-2
$(document).on('select2:open', () => {
    document.querySelector('.select2-search__field').focus();
});

Grith

This is an important tip. Save my day! Thanks – Contreras

Answer 7

On Select2 4.0.2 I have a problem with select2('focus'). List looks like focused but when I press ENTER list not open.
For me that is the solution.

$('#id').select2();
$('.select2-selection', $('#id').next()).focus();
or
$('#id').next().find('.select2-selection').focus();

Julian

Answer 8

According to the select2 documentation:

$('document').ready(function(){
   var opencustomer = $("#changedatachange").select2();
   opencustomer.select2("open");
});

Sojourn

Usually it's better to explain a solution instead of just posting some rows of anonymous code. You can read How do I write a good answer, and also Explaining entirely code-based answers. – Uptotheminute

Answer 9

I tried the other 2 answers but didn't have much luck, maybe because I populate the control via json and in the beginning it's just a hidden input so the programmatic open method didn't have any effect.

However, the following did it just fine for me:

$(document).ready(function() 
{     
    $('#s2id_autogen1').focus();
});

If for some reason you don't have the same id come up in your setup then look for the control having the select2-focusser class attached to it.

Opportuna

Answer 10

We had a textfield as select2 and used the following snippet to activate and focus the cursor in the text input. All the other options didn't work for us, as they were only opening the select2 options, but didn't produce the expected behavior.

$('#s2id_autogen1').click()
$('#s2id_autogen1').focus()

Busybody

Answer 11

On Select2 4.0, the method .select2('focus') does nothing. However, my workaround was simply getting the 'span' element with "aria-labelledby" attribute (notice the value is id-based, so it's kind of unique), and focus it:

var $field = $('select');
$field.select2();
var id = $field.attr('id');
var $spanLabel = $field.next().find("span[aria-labelledby='select2-" + id + "-container']");
$spanLabel.focus();

Countrywide

Answer 12

Already well answered by Dan-Nolan but for those who are new to Select2 a little thing to note: html object needs to be intialised with select2 before calling its functions:

so final code should be

$('#id').select2();

$('#id').select2('open');

Omeromero

Answer 13

I found this fix elsewhere and it works for me // hack to fix jquery 3.6 focus security patch that bugs auto search in select-2

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

OR

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

Incandesce

Answer 14

Use this sequece:

$('#id').select2('open');
$('#id').select2('close');

Calvo

Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others. (This post was flagged by at least one user, presumably because they thought an answer without explanation should be deleted. It probably doesn't help your case that this seems to diverge for no obvious reason from the long-since-accepted answer.) – Onrush

If I do this, it's as if I didn't do anything: the cursor doesn't get placed into the input element created by Select2. – Slur