Select2 Bootstrap Modal with Modal Scroll

Question

Update:

I added this:

$("#id_project").select2({dropdownParent: $(".modal-body")});

...and this causes the dropdown to be correctly placed, and the search can be typed into. Unfortunately...this causes the data delivered to be cleared out, and no options are available to be selected.

I have a form that is populated in a Bootstrap modal that looks like this:

<form method="post" action="/dataanalytics/sparc/tasks/create/" class="js-task-create-form">
  <input type="hidden" name="csrfmiddlewaretoken" value="W6cnRq9zPDvUdQOpqceXPVulbWJAMFazRStzwnZhLi8UEqa87SYiRKmMoHAKwmvb">
  <div class="modal-body">
  <div class="form-group">
    <select name="project" data-minimum-input-length="2" class="form-control select2-hidden-accessible" required="" id="id_project" data-autocomplete-light-url="/dataanalytics/projectautocomplete/" data-autocomplete-light-function="select2" tabindex="-1" aria-hidden="true">
       <option value="" selected="">---------</option>
    </select>
    <span class="select2 select2-container select2-container--bootstrap select2-container--focus" dir="ltr" style="width: 505.091px;">
    <span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-id_project-container">
    <span class="select2-selection__rendered" id="select2-id_project-container">
    <span class="select2-selection__placeholder">
    </span>
    </span>
    <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true">
    </span>
    </span>
  </div>
  <div class="form-group">
    <select name="dataSources" data-minimum-input-length="2" class="form-control select2-hidden-accessible" id="id_dataSources" data-autocomplete-light-url="/dataanalytics/datasourceautocomplete/" data-autocomplete-light-function="select2" multiple="" tabindex="-1" aria-hidden="true">
    </select>
    <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 505.091px;">
    <span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1">
      <ul class="select2-selection__rendered">
         <li class="select2-search select2-search--inline">
         <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;">
         </li>
      </ul>
    </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true">
    </span>
    </span>
  </div>
</div>
</form>
</div>
</div>

The first form group with the select2 single exhibits the problematic behavior. The second form group with the select2 multiple works as expected. Why is there a disparity here?

JavaScript:

  var loadForm = function () {
    var btn = $(this);
    $.ajax({
      url: btn.attr("data-url"),
      type: 'get',
      dataType: 'json',
      beforeSend: function () {
        $("#modal-task").modal("show");
      },
      success: function (data) {
        $("#modal-task .modal-content").html(data.html_form);
      }
    });
  };

Versions:

• jQuery: 1.12.1
• Select2: 4.0.5
• Bootstrap: 4

Everything works great in Chrome. In Firefox, the Select2 boxes in the modal don't allow typing in the search inputs. This is a known issue (https://select2.org/troubleshooting/common-problems) but none of the known solutions appear to work for me.

To solve this issue, I added this code to set the dropdownParent of each Select2:

$.fn.select2.defaults.set("dropdownParent", $('#modal-task'));

This allows typing in the search inputs. However, my modal is long enough that it requires scrolling. If the modal is scrolled beyond the original position, clicking on a Select2 box causes the choices and the search input to appear above the box at the top of the modal. This makes sense, because all of the Select2 boxes were tied to the modal itself with dropdownParent.

How do I prevent this behavior and force the Select2 choices and search input to appear normally (directly above or below the Select2 depending on where it is in relation to the window edge)? Also, I have Select2 boxes on the page even when a modal is not activated, so affecting all Select2 boxes in this manner is not ideal.

Update: I tried swapping the other code for this line:

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

This has the same effect as doing nothing at all: search inputs don't work in Firefox, but dropdowns are correctly placed.

Update 2: I tried this:

$('#id_project').set("dropdownParent", $('#id_project'));

This caused the dropdown to not appear anywhere, and the options are gone (replaced by ---------).

Update 3: I tried this...

$('#modal-task').css('overflow','visible');

...which resulted in the search input working...but modal scrolling is now broken. In addition, the dropdown is slightly misaligned on the left edge of the Select2 box.

Answer 1

This works fine for me

$(document).ready(function () {
    $('select.select2:not(.normal)').each(function () {
        $(this).select2({
            dropdownParent: $(this).parent().parent()
        });
    });
});

Answer 2

I'm pretty much late, could help someone else. If you have tabindex = -1 on your modal then you may not be able to type. Try to remove it. Worked for me.