Search being unfocused

Is this a bug?
#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
#21

I had this issue with Jquery v3.6 .Its fine on v3.7

#22

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

it works, but if using select2 more than two :
$(’.select2’).click(function(){
document.querySelector(’.select2-container–open .select2-search__field’).focus();
});

#23

A fix that worked for me and perhaps others. I was having this issue when I had my HTML set up with the select inside the label (as is shown in the documentation), but when I moved the select outside the label the search maintained focus.
Original:

<label for="someId">Label:
    <select id="someId">...</select>
</label>

Working HTML:

<label for="someId">Label:</label>
<select id="someId">...</select>

I’m not sure if this will help anyone else, but it was the solution for me