Why is jQuery-select2 autofocus not working and how do I fix it?

Question

I'm using select2 in all my projects and it works fine. But in my new project, my select2 input doesn't focus as it should. I have to click on it to focus. What can the problem be and how can I fix it?

I don't know which part of code to show, because I didn't change anything in the standard select2 functions.

Soong

Answer 1

After hard research, I found the reason and the solution on a GitHub page.

The reason certainly is that I'm using a new version of jQuery 3.6 in this project (others were built on v3.4).

The solution (it's enough to add this JavaScript code):

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

Soong

This breaks when using more than one multi-select with tags (i.e. $('.select2Tag').select2({tags: true,width: "100%",});) – Trinitrotoluene

Lifesaver. It should be default behaviour anyway. – Pericarp

Answer 2

updated answer for those who have multiple select, this way you will be focus on the input field associated with the select field

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

Palmer

This give an error with jQuery 3.6.1 and select2 4.0.13: Uncaught TypeError: Cannot read properties of null (reading 'focus') – Plump

@JulesColle make sure that the <select> field has a id attribute, that error basically tells you that document.querySelector cannot find the select2 input element – Palmer

wow it worked like magic! Thank you so much! – Ambitendency

This should be the selected answer. Worked nicely, thanks a ton! – Surculose

Answer 3

I came up with a solution which is a mix of the different answers posted in the select2 github page (https://github.com/select2/select2/issues/5993).

Works with more than one select2 per screen and can also be used in combination with multiple-select2.

It just gets the search input from the OPEN dropdown (.select2-container--open), which is what we're aiming at.

Yep, It's a dirty workaround, but it's the only that works for me.

let forceFocusFn = function() {
  // Gets the search input of the opened select2
  var searchInput = document.querySelector('.select2-container--open .select2-search__field');
  // If exists
  if (searchInput)
    searchInput.focus(); // focus
};
    
// Every time a select2 is opened
$(document).on('select2:open', () => {
  // We use a timeout because when a select2 is already opened and you open a new one, it has to wait to find the appropiate
  setTimeout(() => forceFocusFn(), 200);
});

Berti

Answer 4

The following solution worked for me with multiple select2. I edited the solution by Kida:

$(document).on('select2:open', function(e) {
    window.setTimeout(function () {
        document.querySelector('input.select2-search__field').focus();
    }, 0);
});

Horripilate

Answer 5

Hey i had the same problem of select2 autofocus search. Before the fix i was using Select2 4.0.6-rc.1 and jQuery 3.3.1.

I updated select2 version to 4.0.13 and jQuery to 3.5.1 the problem is solved on its own without using any additional scripts or triggering any select2 events.

Ingravescent