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

Crowd

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

Crowd

For Select2 v4.x, i believe that the className has changed to "select2-search__field". – Yuille

@clime. It is better if you can edit the answer and add new class for v4.x. – Natoshanatron

nice catch, this does not only affect select2, in fact, this does also affect most text inputs, if you have a dynamic content that's being served inside the popup, it will disable textboxes there, raked by brain with the problem. +1 – Mundford

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.

Jowers

Thanks. Adding focus: '#select2-search__field' for me solved the issue. – Janayjanaya