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);
}

Answer 2

You should use the 'focus' option in the magnificPopup call:

$('.open-popup-link').magnificPopup({
  type:'inline',
  focus: '#focus-blur-loop-select',
  midClick: true
});

In the magnificPopup documentation it is defined like this:

focus (empty string)

String with CSS selector of an element inside popup that should be focused. Ideally it should be the first element of popup that can be focused. For example 'input' or '#login-input'. Leave empty to focus the popup itself.