select2 plugin and jquery ui modal dialogs

Question

I am using the Select2 plugin, but the built in search functionality doesn't work when the plugin is used with a jQuery modal dialog. I have a fiddle that shows the problem at...

http://jsfiddle.net/jeljeljel/s3AFx/

Notice the Search box will not accept the focus. There is supposed to be a workaround with the _allowInteraction event (http://api.jqueryui.com/dialog/#method-_allowInteraction), but it isn't working for me.

Can anyone help to see how to make this Fiddle work?

Also, this SO post (select2 plugin works fine when not inside a jquery modal dialog) discusses the same issue, but the suggested fixes are not working for me.

HTML

<div class="dialog">
    <select>
        <option>A tall ship was seen a</option>
        <option>A tall ship was seen b</option>
        <option>A tall ship was seen c</option>
        <option>A tall ship was seen d</option>
        <option>A tall ship was seen e</option>
        <option>A tall ship was seen f</option>
    </select>
</div>

JAVASCRIPT

$('.dialog').dialog({
    modal: true,
    _allowInteraction: function (event) {
        return !!$(event.target).is(".select2-input") || this._super(event);
    }
});
$('select').select2();

Brunson

Answer 1

The addition of some code I found at https://github.com/ivaynberg/select2/issues/1246 seems to have fixed the problem. Updated fiddle...

http://jsfiddle.net/jeljeljel/s3AFx/4/

JAVASCRIPT

$('.dialog').dialog({
    modal: true,
    open: function () {
        if ($.ui && $.ui.dialog && !$.ui.dialog.prototype._allowInteractionRemapped && $(this).closest(".ui-dialog").length) {
            if ($.ui.dialog.prototype._allowInteraction) {
                $.ui.dialog.prototype._allowInteraction = function (e) {
                    if ($(e.target).closest('.select2-drop').length) return true;
                    return ui_dialog_interaction.apply(this, arguments);
                };
                $.ui.dialog.prototype._allowInteractionRemapped = true;
            }
            else {
                $.error("You must upgrade jQuery UI or else.");
            }
        }
    },
    _allowInteraction: function (event) {
        return !!$(event.target).is(".select2-input") || this._super(event);
    }
});
$('select').select2();

Brunson

I have a an error with this code: 'ReferenceError: ui_dialog_interaction is not defined' – Blotter

Your fiddle is throwing same exception. ui_dialog_interaction is not defined – Merissa

I tried this and got the same error. Not sure why this is marked as correct answer. It certainly looks legit – Hyps

Answer 2

There's a new version of the fix bigwavesoftware gives for select2 4.0 from the github issue thread about this problem:

if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
    var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
    $.ui.dialog.prototype._allowInteraction = function(e) {
        if ($(e.target).closest('.select2-dropdown').length) return true;
        return ui_dialog_interaction.apply(this, arguments);
    };
}

This only needs to be run before any modal dialogs that will have select2 in them are created; you don't need to do anything special inside of the dialog options like in bigwavesoftware's solution.

JSFiddle of this fix in action

Affirmatory

This worked for me. I put this before my $("#dialog-edit").dialog({ code – Hyps

Answer 3

I solved this problem by adding this code to JS

$.ui.dialog.prototype._allowInteraction = function(e) {
    return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
};

I found this here https://github.com/ivaynberg/select2/issues/1246#issuecomment-17428249

Blotter

I added this inside my $('.dialog').dialog({. It changes the cursor to a text bar over the search field but still couldn't type text – Hyps

Answer 4

THIS WORKED FOR ME:

$("#modal").dialog({
    closeOnEscape: false,   
    resizable: false,
    height: 180,
    maxHeight: 180,
    width: 700,
    maxWidth: 700,
    modal: true,
    autoOpen: false,
    fluid: true,
    open: function () {
        if ($.ui && $.ui.dialog && !$.ui.dialog.prototype._allowInteractionRemapped && $(this).closest(".ui-dialog").length) {
            if ($.ui.dialog.prototype._allowInteraction) {
                $.ui.dialog.prototype._allowInteraction = function (e) {
                    if ($(e.target).closest('.select2-drop').length) return true;

                    if (typeof ui_dialog_interaction!="undefined") {
                        return ui_dialog_interaction.apply(this, arguments);
                    } else {
                        return true;
                    }
                };
                $.ui.dialog.prototype._allowInteractionRemapped = true;
            }
            else {
                $.error("You must upgrade jQuery UI or else.");
            }
        }
    },
    _allowInteraction: function (event) {
        return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
    }
});

Disbelieve

Answer 5

None of the above seemed to work for me. I did however change the following in my dialog initialization:

dialog = $( "#my-dialog" ).dialog({
                autoOpen: false,
                width: 440,
                title: 'Test Dialog',
                ...
         });

form = dialog.find( "form" ).on( "submit", function( event ) {
    event.preventDefault();
});

dialog.dialog( "open" );

Basically, I took away the 'modal: true' parameter and it works.

Worked for me anyway :)

Play

The simplest solution of them all, and it worked for select2 v.4. Thanks – Rodrich