Magnific-popup: problem when using jquery.select2 in a popup

[clime]

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.

[dimsemenov]

Ok, so the problem is that select2 "dropdown" input field is added directly to the body, instead of inside current select2 DOM element. Which makes popup think that it's outside of it.

When tab focus changes, the popup checks if the new focused element is inside the popup. If it is outside, popup sets focus back to the root element of popup. This is done to "lock" the tab focus in popup.

I don't think that disabling such feature or removing "focus" from select2 is a good idea, so I'd recommend to override _onFocusIn event handler and add an additional check:

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

The updated fiddle: http://jsfiddle.net/qweWa/21/

Important note, I've added function _onFocusIn in 0.9.9 update, so make sure that latest version of popup JS file is used. https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js

[dimsemenov]

If you'll find any issues let me know...

[clime]

It works well. Thanks.

[nestordeharo]

Great!...that solution solves my painful problem...

[s0w4]

Небольшая опечатка:

[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 ) {

[ketancmarix]

It works. Thanks

[swapnil-spyryox]

Simply add following code

$(function () {
$('.class-name').magnificPopup({
callbacks: {
open: function(){
$('.mfp-wrap').css("overflow", "initial")
$('.mfp-wrap').removeAttr('tabindex')
},
},
});
});