Search being unfocused

Is this a bug?
#1

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

1 Like
#2

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

#3

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

#4

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

#5

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.

#6

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.

#7

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?

#8

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

#9

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

#10

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.

#11

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();
});
4 Likes
#12

Thank you Phil! That works beautifully.

#13

Hi phil, this doesn’t work if there are multiple select2 fields on the page. If you click the second select2 field, the first one gets focused.

#14

Then you just need to select the opened input like:

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

i gave this in to my angular .TS page but not working…showing the property ‘focus()’ does not exist

Pls help

#16

Not a real solution, but perhaps someone can shed some light on why this is happening (and it might be causing problems that other people have reported in this thread).

Steps to reproduce:

  1. Create a modal with a select element inside, and on modal load, initialize select2 on it
  2. Add a textarea beneath, so you can easily stretch the height of the modal by stretching the textarea

While the modal’s height is lower than the screen height, you can focus the input.select2-search__field. If you strech the modal (by stretching the textarea), and make it taller than the screen, the focus ability for input.select2-search__field is lost, and you can’t force it by clicking it, nor by setting a timeout for it.

EDIT This seems to be happening in Firefox. Chrome is handling it as expected - it’s focusable.

#17

Thank you Phil. it works for me.

#18

Any headway with this? Just came across this bug myself in a jquery 3.6 project where select2’s are used in a modal and cant get focus.

#19

Any luck with this? Im experiencing the exact same thing.
I used the following:

document.addEventListener('focus', function() {
    console.log('focused: ', document.activeElement)
}, true);

To see what was happening with the focus and this was the output on the console:

focused:  <input class=​"select2-search__field" type=​"search" tabindex=​"0" autocorrect=​"off" autocapitalize=​"none" spellcheck=​"false" role=​"searchbox" aria-autocomplete=​"list" autocomplete=​"off" aria-label=​"Search" aria-controls=​"select2-student_id-results">​
custom.js:2 
focused:  <span class=​"select2-selection select2-selection--single form-control" role=​"combobox" aria-haspopup=​"true" aria-expanded=​"true" tabindex=​"0" aria-disabled=​"false" aria-labelledby=​"select2-student_id-container" aria-controls=​"select2-student_id-container" aria-owns=​"select2-student_id-results">​…​</span>​ flex 
custom.js:2 
focused:  <input class=​"select2-search__field" type=​"search" tabindex=​"0" autocorrect=​"off" autocapitalize=​"none" spellcheck=​"false" role=​"searchbox" aria-autocomplete=​"list" autocomplete=​"off" aria-label=​"Search" aria-controls=​"select2-student_id-results">​
custom.js:2 
focused:  <span class=​"select2-selection select2-selection--single form-control" role=​"combobox" aria-haspopup=​"true" aria-expanded=​"true" tabindex=​"0" aria-disabled=​"false" aria-labelledby=​"select2-student_id-container" aria-controls=​"select2-student_id-container" aria-owns=​"select2-student_id-results">​…​</span>​ flex

The search field is focused then immediately loses focus to the selection container (whether or not anything has yet been selected)

I tried downgrading to jQuery 3.5.1 but the issue persisted.

1 Like
#20

Just putting this hear for anyone who needs it:
https://select2.org/troubleshooting/common-problems#select2-does-not-function-properly-when-i-use-it-inside-a-bootst

Just specify a “dropdownParent” on init and it fixes everything.

1 Like