Can't type in Select2 dropdown input search field (http://kevin-brown.com/select2/)

Question

Can't type in Select2 dropdown input search field (http://kevin-brown.com/select2/)

I have found many issues listed which mentions the same problem but nothing worked for me (https://www.google.com/search?q=can%27t+type+in+select2&ie=utf-8&oe=utf-8&client=firefox-b-ab). I can't type in Select2 dropdown input search field in model dialog using jQuery. By the way i can select value fine from dropdown. Tried inserting tabindex: 0 but no luck.

Code:

$.ajax({
    type: "POST",
    url: "<?php echo $myScripts; ?>",
    data: { id1: "get-release-dropdown-html", id100: "<?php echo $dbTable; ?>" },
    success:function(releaseDropdown){

        $('#progress').hide();

        $( "#modelDialog1" ).dialog({
            modal: true,
            width: '570',
            height: '600',
            resizable: true,
            position:
            {
                my: "center",
                at: "center",
                of: window,
             },
            title: "Trigger Build",
            open: function() {

                $(this).html("<br/>Please select job options.<br/><br/><br/><b>Release:</b>" + releaseDropdown + "<div style='margin-top:30px;'/><b>Build Release Candidate:</b><select id='sReleaseCandidate'><option value='ga' selected>GA</option><option value='beta1'>BETAX</option>'></br>");

                $("#sDescription").focus();

                $("#sRelease, #sReleaseCandidate").select2({
                    tags: true
                });
            },

            close: function() {
                $( this ).dialog( "close" );

            },

        });

    }

});

Answer 1

As indicated in https://github.com/select2/select2/issues/600#issuecomment-102857595

You need to specify modal dialog element as parent for select2, that will make sure focus remains with the modal even though you have clicked on select element

$("#sRelease, #sReleaseCandidate").select2({     tags: true,     dropdownParent: $("#modelDialog1") }); 

Answer 2

If you're using Bootstrap Modal then just remove tabindex="-1" from the bootstrap modal attribute. In my case it worked very nicely.

Answer 3

I've been fighting with this the whole week after an update. What works in one case, it doesn't in other, either is it not properly placed, or cannot be controlled. And testing is not easy either...

At this time, what seems to work best is just to select the real parent of the dropdown... something select2 could very easily do.

$(".select2").each((_i, e) => {
  var $e = $(e);
  $e.select2({
    tags: true,
    dropdownParent: $e.parent()
  });
})