problem when using jquery.select2 in a popup #280

Closed
clime opened this Issue Nov 14, 2013 · 8 comments

Comments

Projects
None yet
7 participants
@clime

clime commented Nov 14, 2013

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

This comment has been minimized.

Show comment
Hide comment
@dimsemenov

dimsemenov Nov 15, 2013

Owner

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.

magnific popup responsive jquery lightbox plugin 2013-11-15 11-04-55

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

Owner

dimsemenov commented Nov 15, 2013

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.

magnific popup responsive jquery lightbox plugin 2013-11-15 11-04-55

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

This comment has been minimized.

Show comment
Hide comment
@dimsemenov

dimsemenov Nov 15, 2013

Owner

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

Owner

dimsemenov commented Nov 15, 2013

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

@dimsemenov dimsemenov closed this Nov 15, 2013

@clime

This comment has been minimized.

Show comment
Hide comment
@clime

clime Nov 15, 2013

It works well. Thanks.

clime commented Nov 15, 2013

It works well. Thanks.

@nestordeharo

This comment has been minimized.

Show comment
Hide comment
@nestordeharo

nestordeharo May 7, 2014

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

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

@s0w4

This comment has been minimized.

Show comment
Hide comment
@s0w4

s0w4 Jul 23, 2014

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

s0w4 commented Jul 23, 2014

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

@yellowled yellowled referenced this issue in s9y/Serendipity Dec 2, 2014

Closed

tag-popup within editor has no auto-focus #241

@JamoCA

This comment has been minimized.

Show comment
Hide comment
@JamoCA

JamoCA Jul 21, 2016

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

JamoCA commented Jul 21, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ketancmarix

ketancmarix May 4, 2017

It works. Thanks

It works. Thanks

@amazeika amazeika referenced this issue in joomlatools/joomlatools-framework Apr 12, 2018

Closed

Focus issue on select2 inputs displayed on modals #156

@swapnil-spyryox

This comment has been minimized.

Show comment
Hide comment
@swapnil-spyryox

swapnil-spyryox Jun 16, 2018

Simply add following code

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

Simply add following code

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment