problem when using jquery.select2 in a popup

Hey,

when using jquery.select2 inside a popup, you can’t type into the select2’s searchbox. There seems to be some kind of focus/blur loop. I have described the issue in more detail here: http://stackoverflow.com/questions/19990191/select2-in-magnific-popup-search-input-cannot-be-focused. Here is jsfiddle that shows the problem: http://jsfiddle.net/clime/qweWa/15/. I have tracked the problem to the following code in magnific popup:

        setTimeout(function() {

            if(mfp.content) {
                mfp._addClassToMFP(READY_CLASS);
                _setFocus();
            } else {
                // if content is not defined (not loaded e.t.c) we add class only for BG
                mfp.bgOverlay.addClass(READY_CLASS);
            }

            // Trap the focus in popup
            _document.on('focusin' + EVENT_NS, function (e) {
                if( e.target !== mfp.wrap[0] && !$.contains(mfp.wrap[0], e.target) ) {
                    _setFocus();
                    return false;
                }
            });

        }, 16);

_setFocus is called indefinietly when select2 is clicked on in a popup.

[JamoCA]

The sample code should be updated for the new Select2 v4.x className.

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

A more future-proof solution may involve searching for “select2” anywhere in the class attribute.

if( $(e.target).attr('class').indexOf('select2') >= 0 ) {

[swapnil-spyryox]

Simply add following code

$(function () { $(‘.class-name’).magnificPopup({ callbacks: { open: function(){ $(‘.mfp-wrap’).css(“overflow”, “initial”) $(‘.mfp-wrap’).removeAttr(‘tabindex’) }, }, }); });