select2 keyboard issue on mobile

Question

I have an issue with select2, when it is being used on mobile devices. On click, the virtual keyboard is shown. I tried using something like

$('select').select2({
  shouldFocusInput: function (instance) {
        // Attempt to detect touch devices
        var supportsTouchEvents = (('ontouchstart' in window) ||
                                   (navigator.msMaxTouchPoints > 0));

        // Only devices which support touch events should be special cased
        if (!supportsTouchEvents) {
            return true;
        }

        // Never focus the input if search is disabled
        if (instance.opts.minimumResultsForSearch < 0) {
            return false;
        }

        return true;
    }
});

with no success. Even if I try to simply use

shouldFocusInput: false

the search text keeps getting focused.

I do want to allow searching, I just need to remove the auto-focus on click. — Loukas Avramidis, Nov 07 '14 at 14:19
That's what {shouldFocusInput: false} is about... I have no idea why it doesn't work. I also tried updating the library but nothing. — Loukas Avramidis, Nov 07 '14 at 15:16

score 3 · Accepted Answer · answered Nov 07 '14 at 18:54

3

have you tried

minimumResultsForSearch = -1

post of issue: https://github.com/ivaynberg/select2/issues/1541

answered Nov 07 '14 at 18:54

Jay Rizzi

4,196
5
42
71

It definitely works better... but it still has quite a few issues. It only works for single selects(on multiple I still get the keyboard), and even there something weird goes on: when I click on the select element and it's on the upper half of the screen it works fine, when it's on the lower the keyboard pops up again... so frustrating. – Loukas Avramidis Nov 10 '14 at 08:21
Nevermind, it has probably got to do something with the phone options. When the select box overflows, the keyboard pops up. Thanks whatsoever. – Loukas Avramidis Nov 10 '14 at 08:53

score 1 · Answer 2 · answered Nov 07 '14 at 14:31

1

Try this on mobile see if it works:

var $select2 = $('select').select2();

$select2.on('select2-open', function(e) {
    $('.select2-drop-active .select2-input').blur();
});

answered Nov 07 '14 at 14:31

Tomanow

7,247
3
24
52

1

Now the dropdown won't open on the first click, but the keyboard does. Kinda the opposite of what I need. haha – Loukas Avramidis Nov 07 '14 at 14:36

score 1 · Answer 3 · answered Apr 30 '15 at 18:41

This worked for me. I apologize for the coffeescript ahead of time.

Instructions in words: when opening the select2 make the input read only. When the input is focused, remove readonly.

$(".location-select").on("select2:open", () ->
  $(".select2-search__field").attr("readonly", true)

  $(".select2-dropdown").bind("touchstart", (e) ->
    $target = $(e.target)
    if $target.hasClass("select2-search__field")
      $target.removeAttr("readonly").focus()
  )
)

$(".location-select").on("select2:close", () ->
  $(".select2-dropdown").unbind("touchstart")
  $(".select2-search__field").removeAttr("readonly")
)

score 1 · Answer 4 · answered Dec 21 '18 at 21:39

Select2 now supports this behavior (see this link for details)

On that link you will find:

For Single Select:

For single selects, Select2 allows you to hide the search box using the minimumResultsForSearch configuration option. In this example, we use the value Infinity to tell Select2 to never display the search box.

$("#js-example-basic-hide-search").select2({
    minimumResultsForSearch: Infinity
});

And for Multi-Select:

For multi-select boxes, there is no distinct search control. So, to disable search for multi-select boxes, you will need to set the disabled property to true whenever the dropdown is opened or closed:

$('#js-example-basic-hide-search-multi').select2();

$('#js-example-basic-hide-search-multi').on('select2:opening select2:closing', function( event ) {
    var $searchfield = $(this).parent().find('.select2-search__field');
    $searchfield.prop('disabled', true);
});

score 1 · Answer 5 · answered Sep 01 '19 at 06:56

I used an if statement to find out if the input is focused and after that used props to turn its focus to false,It seems to work well.

$('.yourSelect2-continer').on('select2:open', function () {

        if ( $('.select2-search input').is(':focus') ) {

            $('.select2-search input').prop('focus', false);

        } else {

            $('.select2-search input').prop('focus', true);

        }

    })

score 0 · Answer 6 · edited Jan 17 '16 at 12:21

0

$(".select2-search input").prop("readonly", true);

Worked fine for me. Make sure you use it after the table's data has been loaded.

edited Jan 17 '16 at 12:21

Tunaki

132,869
46
340
423

answered Jan 17 '16 at 12:02

adi ben

491
5
15

Indra Kumar S · Answer 7 · 2016-08-21T14:50:53.300

0

It may be too late to share this fix.... But i believe it would help someone... The accepted answer removes input box from select2. If you want to remove only the keyboard popup (input focus) in mobile, Just copy and paste the script at the bottom of your page.

<script>
 $(".select2, .select2-multiple").on('select2:open', function (e) {
     $('.select2-search input').prop('focus',false);
 })
</script>

edited Aug 21 '16 at 14:50

answered Aug 21 '16 at 13:48

Indra Kumar S

2,818
2
16
27

score 0 · Answer 8 · answered Feb 05 '18 at 14:05

I previously answered another question relative to this one.

If you have a problem with the iPad keyboard which hide the bootstrap modal while clicking on the select2 input, I suggest you to check my answer : Select2 doesn't work when embedded in a bootstrap modal.

Good luck :)

score 0 · Answer 9 · answered Apr 05 '19 at 03:40

This works best:

minimumResultsForSearch: Infinity

Here is a handy way to setup select2 boxes.

<script>
            $(document).ready(function() {

                $('.teamsList').val('').change();
                $('.teamsList').prepend('<option></option>').select2({placeholder: 'Select or create new...', allowClear: true, width: '100%', minimumResultsForSearch: Infinity});
                $('.teamsList').prepend('<option value="0">Create new</option>');

score 0 · Answer 10 · answered May 12 '19 at 12:06

0

This code works for me:

$(".select2-selection--single").click(function(){
  $(".select2-search__field").attr("type","number");
});

answered May 12 '19 at 12:06

khaled

77
1
8

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please [include an explanation for your code](https://meta.stackexchange.com/q/114762/269535), as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. You can use the [edit] button to improve this answer to get more votes and reputation! – Brian Tompsett - 汤莱恩 May 12 '19 at 12:32

Garjy · Answer 11 · 2020-02-03T13:36:01.303

0

You should get rid of the div containing .select2-search and .select2-focusser. This fixes it:

    $('select').select2(
      minimumResultsForSearch: -1
    )
    .on('select2-opening', function(e) {
      $(this).siblings('.select2-container').find('.select2-search, .select2-focusser').remove()
    });

edited Feb 03 '20 at 13:36

answered Feb 03 '20 at 13:30

Garjy

467
5
12

score 0 · Answer 12 · answered Jun 28 '22 at 06:44

0

$('#country').on('select2-focus', function (e) /// country is the select2 field id
{
     $('.select2-container .select2-focusser').remove();
     $('.select2-search input').prop('focus',false).removeClass('select2-focused');
});

answered Jun 28 '22 at 06:44

Rutvik kakadiya

89
4

select2 keyboard issue on mobile

12 Answers12