select2 in magnific popup: search input cannot be focused

Question

I use select2 jquery plugin together with magnific popup. If I click on the select in an open popup, searchbox with some results appears. The problem is that it is impossible to type anything into the searchbox - cursor just does not appear. Here is jsfiddle that demonstrates the problem http://jsfiddle.net/clime/qweWa/15/. The code goes like this:

# html
<a href="#test-popup" class="open-popup-link">Show inline popup</a>

<div id="test-popup" class="white-popup mfp-hide">
    <select id="focus-blur-loop-select">
        <option>hello</option>
        <option>world</option>
    </select>
</div>

# js
$(function() {
  $('.open-popup-link').magnificPopup({
    type:'inline',
    midClick: true
  });

  $('#focus-blur-loop-select').select2({
      width: '200px'
  });
});

# css
.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

I have already done some basic research and I have found out that the two callbacks below are called indefinetly. There seems to be some infinite loop in the events.

// select2.js:742
search.on("focus", function () { search.addClass("select2-focused"); });
search.on("blur", function () { search.removeClass("select2-focused");});

Answer 1

The answer is here: https://github.com/dimsemenov/Magnific-Popup/issues/280. The problem is caused by select2 input being renderred out of the popup element. It can be fixed by overriding popup's _onFocusIn method:

$.magnificPopup.instance._onFocusIn = function(e) {
    // Do nothing if target element is select2 input
    if( $(e.target).hasClass('select2-input') ) {
       return true;
    } 
    // Else call parent method
    $.magnificPopup.proto._onFocusIn.call(this,e);
}