Closed clime closed 10 years ago
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
If you'll find any issues let me know...
It works well. Thanks.
Great!...that solution solves my painful problem...
Небольшая опечатка:
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 ) {
It works. Thanks
Simply add following code
$(function () { $('.class-name').magnificPopup({ callbacks: { open: function(){ $('.mfp-wrap').css("overflow", "initial") $('.mfp-wrap').removeAttr('tabindex') }, }, }); });
If you'll find any issues let me know...
bro in popup video in video link is not working when open the link video is not play
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:
_setFocus is called indefinietly when select2 is clicked on in a popup.