title: Bootstrap Modal doesn't scroll with Select2 dropdown
body: <p>I have a boostrap modal with a select2 dropdown inside:</p>
  
  <pre><code>&lt;div id="add-event" class="modal" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
  
              ....
  
              &lt;div class="organizer-options form-group id="organizer-search"&gt;
                  &lt;span&gt;Hosted by:&lt;/span&gt;
                  &lt;select class="form-control organizer-search" name="organizer-search" autocomplete="off"&gt;
                  &lt;/select&gt;
              &lt;/div&gt;            
  </code></pre>
  
  <p>I init the select2 in a separate JS file:</p>
  
  <pre><code>$(".organizer-search").select2({
      dropdownParent: $("#add-event"),
      minimumInputLength: 3,
      placeholder: "Select the host",
      ajax: {
          url: "/people/search",
          method: "get",
          dataType: "json",
          delay: 250,
          data: function(params) {
              return {
                  term: params.term
              };
          },
          processResults: function(data) {
              return {
                  results: data
              };
          }
      }
  });
  </code></pre>
  
  <p>I added the <code>dropdownParent: $("#add-event")</code> line to the select2 init because otherwise I am unable to focus on the select2 inside the modal. I have also tried <code>$.fn.modal.Constructor.prototype.enforceFocus = function() {};</code> before initalizing all my modals.</p>
  
  <p>Both of these enable focusing on the dropdown, but disable scrolling of the modal on mobile (chrome and firefox).</p>