Search being unfocused

Hello,

we are currently in the process of migrating from Select2 3.5 to 4.X, and noticed, that the search input loses focus straight away. I noticed the same behaviour on the official website as well, see https://select2.org/appearance#labels .

How can we fix this? Is that a bug?

Regards

4 Likes

I also noticed that selecting with arrow keys “works” …but it doesn’t select the current item in the dropdown.

1 Like

I don’t think this is a bug, although you can certainly question the design decision.

If you use a mouse to open the dropdown (i.e., by clicking), the search box is not focused. I believe the Select2 developer assumed that you would, in most cases, use the mouse to select the item(s) from the dropdown.

Conversely, if you use the keyboard to open the dropdown (i.e., by focusing on the control and pressing Enter or Alt+DownArrow), then the search box is focused, probably under the assumption that it will be easier for a keyboard user to search for the item(s) they want to select, rather than navigating through the results with the Up/DownArrow and PageUp/Down keys).

If you want to always ensure the search box is focused when the dropdown opens, you can attach an event handler for the select2:open event. In the event handler, set focus on the search field with code like $('input.select2-search__field').[0].focus();

Hi,

i will try that… but look at the inconsistent behaviour then:

https://select2.org/getting-started/basic-usage

If you open the select2 box via mouse the search box gets focused just fine. Hence i assume this is more of a bug than deliberate design choice.

Edit: I actually tried that already and it doesn’t work wit Ajax requests. Needs a timeout before the focus. Not optimal at all.

Regards

I concur that there is something still wrong.

Here is the simplest possible example, copied from the documentation.

In this example, using Chrome at least, it is impossible to focus in the search field without using the mouse, and it can only be done after first opening the select.

In contrast, on the documentation page itself where the example appears, opening the select, either with keyboard or clicking only once, causes the search field to receive focus. That is the desirable behavior. There is no advantage to the search field not receiving focus, as you can still use the arrow keys or click to select.

I can also see that this code in select2.js attempts to set the focus on the search field when the dropdown opens.

container.on('open', function () {
  self.$search.attr('tabindex', 0);
  self.$search.attr('aria-controls', resultsId);

  self.$search.trigger('focus');

  window.setTimeout(function () {
    self.$search.trigger('focus');
  }, 0);
});

If found that editing it to use the vanilla JS focus method solves it:

   container.on('open', function () {
      self.$search.attr('tabindex', 0);
      self.$search.attr('aria-controls', resultsId);

      self.$search[0].focus();

      window.setTimeout(function () {
        self.$search[0].focus();
      }, 0);
    });

EDIT:
I have also discovered that reverting to jQuery 3.5.1 instead of 3.6.0 solves the problem.

1 Like

So I know this may be old but I am facing this in one of the application I use. Was this fixed at some point?

same goes for me - jquery 3.6.0 prevents input from getting focus. Cant give it focus even after it is already rendered.

Same thing happens to me. I had to fix the jQuery version to 3.5.1 for now.

1 Like

I am also seeing this using jQuery 3.6.0, I cannot downgrade to 3.5.1 due to other issues.

I made a JSFiddle: Edit fiddle - JSFiddle - Code Playground

If you click everything works as expected, but if you use keyboard navigation on the form the input never receives focus.

Any ideas on a work around? Thank you all.

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-search__field').focus();
});
1 Like

Thank you Phil! That works beautifully.