CODEWITHSUNDEEP
javascriptjquery-select2
Houy Narun
Houy Narun

Reputation: 1715

Disable auto focus on drop-down open of select2?

I tried to disable auto focus of input search inside select2 especially on mobile to disable keyboard popup. However, as documented here:

select2 will not be triggering the native events. select2 will also not be triggering non-native versions of the events, which is less of an issue as we still have the option to add the native events without breaking compatibility.

So the only way I could do is to try to get every input box inside select2 that was currently on focused and set lose focus, but has no luck.

$("select").select2().on("select2-open",":input",function(){
    setTimeout(function(){
        $(":focus").blur();
    }, 50);
});

Is there any possibility that I could achieve that result above? Thanks.

Upvotes: 3

Views: 10655

Answers (5)

Kash
Kash

Reputation: 1801

select2 version 4.0.11

This is what worked for me:

$('.select2').on('select2:opening', function (e) {
    // Remove focus from the input when opening
    setTimeout(function() {
        $('.select2-search__field').blur();
    }, 1);
});

Upvotes: 0

Christian Žagarskas
Christian Žagarskas

Reputation: 1237

this is in the top google results for "select2 disable focus when cleared"

here is the solution for Select2 4.0.0 | Select2 4.1.1

$("select").on("select2:clear", function (evt) {
  $(this).on("select2:opening.cancelOpen", function (evt) {
    evt.preventDefault();
    
    $(this).off("select2:opening.cancelOpen");
  });
});

Source Thread: https://github.com/select2/select2/issues/3320#issuecomment-524153140

jump to [kevin-brown - Aug 22, 2019]

seo tldr;

  • clear button in select2 4.x causes focus
  • stop select2 from regaining focus after clear
  • select2 disable focus when cleared

Upvotes: 0

S M Khalilullah
S M Khalilullah

Reputation: 91

I am not sure why, but the above solutions didn't work for me. But this one worked-

$('select').on('select2:open', function (event) {
    $('.select2-search input').prop('focus',false);
});

Upvotes: -1

andreivictor
andreivictor

Reputation: 8491

I think I've found a solution for select v3 - tested in v3.5.4.

We can use the option shouldFocusInput, which must be a function that should return true or false.

So initialize the plugin with the following code:

$(document).ready(function() {
  $('select').select2({
    shouldFocusInput: function() {
      return false;
    }
  });
});

Codepen demo: https://codepen.io/andreivictor/pen/JmNzvb

If you want to disable the auto-focus only on mobile devices, my approach is to use Modernizr library, which can test for the existence of Touch Events in the browser.

So the complete code should be:

$(document).ready(function() {
  $('select').select2({
    shouldFocusInput: function() {
      if (Modernizr.touch) {
         return false;
      }
      return true;
    }
  });
});

Upvotes: 1

Houy Narun
Houy Narun

Reputation: 1715

Finally, I managed to find solution which works just fine for me as below:

/* Hide keyboard on select2 open event */
function hideSelect2Keyboard(e){
    $('.select2-search input, :focus,input').prop('focus',false).blur();
}

$("select").select2().on("select2-open", hideSelect2Keyboard);

$("select").select2().on("select2-close",function(){
    setTimeout(hideSelect2Keyboard, 50);
});

Tested on Tablet, and iOS device. In function hideSelect2Keyboard(), I searched for every current focus element, include input field which could be used to initialized select2, setting .prop('focus',false) which will remove focus and consequently disable keyboard popup on select2-open and select2-close event, by chaining .blur() is to remove focus border from element. Then I attached this function to select event open and close and it works just fine.

I hope this will help other who searching for this as me too. Thanks.

Upvotes: 2

Related Questions