Prevent select2 from autmatically focussing its search-input when dropdown is opened

Question

I\'m looking for a way to prevent select2\'s search-input being automatically focussed when the select2-dropdown is opened. I know this is select2\'s intended default behavi

Answer 1

Although @Choma's answer is fine, it will alter the select2 default behavior on both desktop and mobile devices.

I had to find a solution for a responsive website: prevent the auto-focus of the search input only on mobile devices, and keep the default behaviour on desktops.

In order to detect the mobile devices, I've used Modernizr library, which can test for the existence of Touch Events in the browser.

We can use Modernizr.touch on Modenizr v2, which will return true if touch events are supported, or false otherwise.

So we can modify @Choma's answer like this:

$('select').on('select2:open', function() {
  if (Modernizr.touch) {
    $('.select2-search__field').prop('focus', false);
  }
});

Demo:

https://codepen.io/andreivictor/full/QmKxOw/

Tested on:

• Desktop: IE 11, Chrome, Firefox, Opera, Safari
• Android 4.2.2
• Android 5.0.1 (Samsung Galaxy S4)
• Android 6.0.1 (Samsung Galaxy S7 Edge)
• iOS 11.2.5 (iPhone 8)
• iOS 10.3.2 (iPhone 6 Plus)
• iOS 10.3.2 (iPad Mini 3)

Answer 2

maybe someone need~ I've tried this and it works~

$('#selectID').on('select2:opening', function (e) {
                e.preventDefault();
            });

Answer 3

I got JQuery's "too much recursion" error in the console when using Choma's solution.

The following worked for me for v4:

// keep search input available, but avoid autofocus and thus mobile 
// keyboard appearing when dropdown opens.
$('body').on('select2:open','#subject', function (e) {
    $('#modal .select2-search input').attr('readonly',true);
    $('#modal .select2-search input').click(function(ev){
        $('#modal .select2-search input').attr('readonly',false);
    });
});

As you can tell this select2 field is on a modal with the id modal and the select2 field itself has an id of subject. Of course change the selector to what's appropriate for your own code.

It basically adds a readonly attribute to the input when the select2 field opens preventing a mobile keyboard from appearing, and then removes it when the search field is clicked/pressed on allowing the keyboard to appear only then.

Answer 4

This worked for me on select2 v4:

// keep search input, but avoid autofocus on dropdown open
$('#research .filter').on('select2:open', function (e) {
    $('.select2-search input').prop('focus',false);
});

credit goes to this github comment

Answer 5

The only 'solution' I found is to remove .select2-input and .select2-focusser right after creation of the dropdown. This only works fine when you don't need the input field for searching, e.g. when the list is short enough.

Removing only .select2-focusser at least prevents the keyboard from popping up when an option was selected.

Answer 6

Following trick worked for me. You can disable input search field of select2 element :

$('select').on('select2:opening', function() {
  $('.select2-search__field').attr("autocomplete", "new-password");
});

setTimeout(function(){ $('.select2-search__field').attr("autocomplete", "new-password"); }, 2000);