Autocomplete input box frozen when the form is in bootstrap 3 modal.

[wkang0]

I put a form with person and birth_country on a modal form. The Ajax call works fine but the input box was frozen and I can't type anything there.

[wkang0]

This is a select2 issue. Please refer to:
http://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal

[zibertscrem]

I know this issue still exists. And I found an elegant solution to the bootstrap modal problem. We just "decorate" jquery select2 function and check internally that element is inside a modal, and If so then just patch options with dropdownParent pointing to this modal. And you don't need to catch any DAL's events, everything just started working smoothly

$(document).ready(function () {
  const oldSelect2 = $.fn.select2;
  $.fn.select2 = function (options) {
    const $element = $(this);
    const $modal = $element.parents('.modal:first');
    options = options || {};
    if (typeof options === "object" && $modal.length !== 0) {
      $.extend(options, {dropdownParent: $modal});
    }
    return oldSelect2.apply(this, [options]);
  };
});

P.S. also you may want to do something like this in CSS cause default value could be not enough:

.modal .select2-container {
  z-index: 2000;
}