CODEWITHSUNDEEP
jqueryjquery-select2
user984976
user984976

Reputation: 1334

select2 force focus on page load

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"

Upvotes: 75

Views: 80348

Answers (14)

Ali BÜYÜKKILINÇ
Ali BÜYÜKKILINÇ

Reputation: 9

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

Upvotes: -1

Bram Luyten
Bram Luyten

Reputation: 1063

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

Upvotes: 2

Dan-Nolan
Dan-Nolan

Reputation: 6657

According to the Select2 documentation: 

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

Should be all you need.

Found under the Programmatic Access section in the documentation.

Upvotes: 156

HARDIK
HARDIK

Reputation: 72

According to the select2 documentation: 

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

Upvotes: 1

Mariusz Charczuk
Mariusz Charczuk

Reputation: 509

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

Upvotes: 1

simsketch
simsketch

Reputation: 3052

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

Upvotes: 5

Kadeer Mughal
Kadeer Mughal

Reputation: 111

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

Upvotes: 0

LockTar
LockTar

Reputation: 5467

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.

Upvotes: 13

Leonardo Montenegro
Leonardo Montenegro

Reputation: 331

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

Upvotes: 0

Renato Marteli
Renato Marteli

Reputation: 1

Use this sequece:

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

Upvotes: -3

NielsH
NielsH

Reputation: 697

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

Upvotes: 0

keaplogik
keaplogik

Reputation: 2419

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

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

Upvotes: 39

gts
gts

Reputation: 627

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.

Upvotes: 0

Mottie
Mottie

Reputation: 86473

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

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

Upvotes: 9

Related Questions