select2 multi select with minimum character bug

Question

I am using select2 for some time now, but I just started using multi selects. Since the beginning I am having the same issue.

Whenever I make a multiselect dropdown with the requirement of minimum 1 character, it tells me "Please enter 1 or more characters", fine right?

Well when I click somewhere else in my page this popup persists.

How to remove this issue?

$("#e1").select2({ 
     minimumInputLength: 1
});

http://jsfiddle.net/Jeanpaul1994/3tfcm83n/1/

EDIT

My multi select. @Html.DropDownListFor(model => model.Visit.ExtraHosts, new List(), null, new { @class = "form-control select2-customselector", @multiple = "multiple" })

My Ajax call.

$('#@Html.IdFor(model => model.Visit.EmployeeId), #@Html.IdFor(model => model.Visit.ExtraHosts)').select2({
            ajax: {
                url: '@Url.Action("GetHostsViaAJAX", "Visitors")',
                dataType: 'json',
                type: "POST",
                data: function (params) {
                    return {
                        searchTerm: params.term
                    };
                },
                processResults: function (data) {
                    return { results: data };
                }
            },
            placeholder: "@IAMMVCResources.SelectAHost",
            minimumInputLength: 1,
            allowClear: true
        });

Answer 1

I don't know a lot about this particular plugin, but after using the fiddle that you posted, I have come up with a fix. I have extended the jQuery function by adding an additional method to fix select2. The code can be found below, and the fiddle has been updated.

/******************************************************
*******************************************************
Fixes select2.js issues with multi-select <select> elements.
*******************************************************
*******************************************************/
(function($) {
    //Make sure that the html mouseup event listener is not added more than once.
  var isFixed = false;
  $.fixSelect2 = function() {
    if (!isFixed) {
        //Set is fixed to true to prevent event listener from being added more than once.
      isFixed = true;
      $('html').mouseup(function(e) {
        //The target of the mouseup event.
        var target = $(e.target);
        var classList = null;
        var isSelect2 = false;
        var name = "";
        var hideSelect2 = function() {
          $('.select2-dropdown-open').removeClass('select2-dropdown-open');
          $('.select2-drop').hide();
        };
        //If the target is not the html element, proceed.
        if (!target.is(this)) {
            //Get the class of the target element, if applicable.
          classList = target.attr('class');
          //If the element has class(es), parse them.
          if (classList !== "") {
            classList = classList.split(' ');
            for (var i = 0, len = classList.length; i < len; i++) {
              name = classList[i];
              //If current class name contains "select2" in the string
              //then we can assume the element is a select2 element
              //and no further processing is necessary.
              if (name.indexOf('select2') > -1) {
                isSelect2 = true;
                break;
              }
            }
          }
          //Only if the target of the mouseup event is not a select2 element
          //We should hide the select2 components.
          if (!isSelect2) {
            hideSelect2();
          }
        } else {
            //If the event target is the html element itself, then this is outside of the current
          //select2 context and we know that the target is not a select2 element, so we should
          //proceed to hide the select2 elements.
          hideSelect2();
        }
      });
    }
    //Return the jQuery instance for chaining.
    return this;
  };

})(jQuery);