Select2 (2.3.1) fails to open in IE8 #354

DaveJarvis opened this Issue Aug 25, 2012 · 4 comments


None yet

3 participants

Might not be an issue...

  1. Have working version of Select2 2.3.0, performs as expected (select2.min.js).
  2. Replaced select2.min.js v2.3.0 with v2.3.1.
  3. No other changes made.

Actual Behaviour
Select2 opens, fails to query, then closes immediately.

Expected Behaviour
Select2 opens, queries, and provides the list of data.

Related Notes
Both versions work as expected in FF.

Manually merged #342 into 2.3.0.

The code to focus the cursor in 2.3.1 is not the problem. The problem is some other change that affected IE8.


fiddle please, because controls on homepage seem to work fine in IE8

I have made a video of the issue; I don't have time to create a jsfiddle.


The code to import the scripts:

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/checkbox.js"></script>
    <script type="text/javascript" src="js/select2.min.js"></script>
    <script type="text/javascript" src="OpenLayers.js"></script>

The HTML (within a FORM element) that creates the layout for the select2 (note the table-based, not div-based, layout):

      <div id="content">
        <table border="0" cellspacing="0" cellpadding="0" class="inputs" id="inputs">
              <tr class="inputs-template" id="inputs-template">
                <select name="filter-object" id="filter-object" class="ui-widget ui-state-default ui-corner-all">
                  <option value=""> </option>
                <select name="filter-relation" id="filter-relation" class="ui-widget ui-state-default ui-corner-all">
                  <option value=""> </option>
                <input type="hidden" name="filter-value" id="filter-value" class="ui-widget ui-state-default ui-corner-all"
                  style="width:225px" />

The jQuery dialog box is created as follows:

    var dialog = $('#filter').dialog({
      autoOpen     : true,
      title        : '<a class="help" href="help/" target="_help"><img src="img/help.png" width="14" height="14" border="0" /></a> Show sites where...',
      modal        : false,
      closeOnEscape: false,
      minHeight    : 120,
      minWidth     : 500,
          width        : 'auto',
          height       : 'auto',
      autoResize   : true,
      resize       : 'auto',

      position: ['left', 'bottom']

The select2 element is created as follows:

    placeholder: '',
    allowClear: true,
    minimumInputLength: 0,
    initSelection: function( element, callback ) {
      return $.getJSON(
        MAP_SERVER_SERVICE + 'search?o=' + filterObject.val() + '&r=' + filterRelation.val() + '&v=', null, function( data ) {
        if( $.isFunction( callback ) ) {
          return callback( data );
    ajax: {
      url: MAP_SERVER_SERVICE + 'search',
      dataType: 'json',
      data: function( term, page ) {
        return {
          o: filterObject.val(),
          r: filterRelation.val(),
          v: term
      results: function( data, page ) {
        return { results: data };
    minimumResultsForSearch: 15,
    formatResult: filterFormatResult,
    formatSelection: filterFormatSelection
  }).on( 'change', function( e ) {
am0d commented Sep 5, 2012

See my comment on issue #369 for a possible explanation / cause of this.

@ivaynberg ivaynberg closed this in 96657a1 Sep 11, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment