I use select2 plugin for my site. In IE, the problem encountered is that it always sets the focus on select2 frame.

<select class="form-control" name="categories[]" id="inputCate"  multiple="multiple">

//JS

$(document).ready(function(){
        var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
        $("#inputCate").select2({
          data: data,
          maximumSelectionLength: 2,

          placeholder: "Chuyên mục"

        });
    });

Fiddle

I use select2 plugin for my site. In IE, the problem encountered is that it always sets the focus on select2 frame.

<select class="form-control" name="categories[]" id="inputCate"  multiple="multiple">

//JS

$(document).ready(function(){
        var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
        $("#inputCate").select2({
          data: data,
          maximumSelectionLength: 2,

          placeholder: "Chuyên mục"

        });
    });

Fiddle

• javascript
• jquery
• jquery-select2

• A few questions: Does this only happen in IE? If you remove the brackets from the name attribute (such that it is only categories), does the issue still happen? What do you mean by "always sets the focus on select2 frame"? – Kevin Brown-Silva Commented Mar 27, 2015 at 21:57
• Hi Kevin ! This error only happens on IE, and if I remove the brackets in the name, I can not get the data that the user has selected. (I use PHP code). and here is the exact error when the page is loaded, the cursor always focus on select2 frame though I click the mouse pointer out other ponents of the site, the cursor remains in select2 taget the frame. Thank you for your interest in my question – user1790695 Commented Mar 28, 2015 at 18:05
• I have the same question too – wilsont Commented Jun 29, 2015 at 2:27

4 Answers 4

There is a bug in IE: input event occurs when placeholder text is applied. So you can: a) remove placeholder option b) Replace in select2.js

 this.$selection.on('input', '.select2-search--inline', function (evt) {
      // Unbind the duplicated `keyup` event
      self.$selection.off('keyup.search');
    });

    this.$selection.on('keyup.search input', '.select2-search--inline',
        function (evt) {
      self.handleSearch(evt);
    })

with

this.$selection.on('keyup.search', '.select2-search--inline',
    function (evt) {
  self.handleSearch(evt);
});

Try to use last version Select2 v4.0.1

There were fixed many bugs

It's IE placeholder bug. When js replace placeholder IE set focus. My bad solution for jQuery and Select2 4.0.0

    fixIePlaceholderSelect2 = function(select) {
        var placeholderFix = select.parent().find('.placeholder_ie_fix');
        if(select.val())
            placeholderFix.addClass('hide');
        placeholderFix.on("click", function () {
        select.select2("open");
            $(this).addClass('hide');
        });
        select.on("select2:open", function () {
            if(!select.val())
                placeholderFix.addClass('hide');
        });
        select.on("select2:close", function () {
            placeholderFix.removeClass('hide');
        });
    };


    fixIePlaceholderSelect2(
      $('select[name=services]')
    );

 .placeholder_ie_fix {
        position: absolute;
        margin-top: -9px;
        cursor: pointer;
    }
    .placeholder_ie_fix.hide {
        display: none;
    }

<div class="placeholder_ie_fix">My placeholder</div>
<select name="services" class="set_fix" multiple>
   <option>234</option>
</select>

The placeholder works fine if you avoid accents in it.

As @alexandr-nekrasov said, the problem is on the placeholder, but only if it contains accents. Try placeholder: "Chuyen mục" and see if it works. Needs some tests but it worked for me.