CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapjquery-select2
Mike Diaz
Mike Diaz

Reputation: 2065

Bootstrap Modal with Select2 Focus issue

I have select2 selects on bootstrap 3 modal.

For all three components the code is as follows

   $('#primaryModal').on('shown.bs.modal', function () {

            $(".icdLookup").select2({
               .../
             }):
};

The problem I have am having is in the picture below. If I make a selection on a select2 and focus out to another input the focus will still remain on the select2 box.

enter image here

Upvotes: 0

Views: 6521

Answers (1)

d.grassi84
d.grassi84

Reputation: 393

I've solved this problem by applying the following fix (just put it in your JS code):

//fix modal force focus
$.fn.modal.Constructor.prototype.enforceFocus = function () {
  var that = this;
  $(document).on('focusin.modal', function (e) {
     if ($(e.target).hasClass('select2-input')) {
        return true;
     }

     if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
        that.$element.focus();
     }
  });
};

Upvotes: 2

Related Questions