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" );

            },

        });

    }

});

Creditable

if you are having this problem within a bootstrap modal dialog, refer to this question https://mcmap.net/q/86021/-select2-doesn-39-t-work-when-embedded-in-a-bootstrap-modal/833732 – Loris

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")
});

Atkinson

What about dynamic models? I have this separated form with locations and entire system uses it in different parts. – Recapture

For those that had an issue with it, but are reusing a module in different locations, you can attach the dropdownParent to the div encapsulating the select2, and then it works properly at all locations you use it, whether in the modal or the page. – Drupelet

i cannot fix this issue for over a year, really useful! – Chlor

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.

Goldwin

After removing, you should use Ctrl + F5 because browser caches it. – Azure

Life saver! Thanks dude! – Putman

You're saving my day. Thanks mate. – Unmoved

I'd have search the entire day without your answer – Antiquate

Yes Sir, this worked for me, not the "dropdownParent" setting. – Gadget

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()
  });
})

Resinate

Answer 4

Remove tabindex="-1" from modal atribute and add a custom style="width: 100%;" in for proper alignment

Compendious

Answer 5

I had this issue when using react-bootstrap. Solved it by adding enforceFocus={false} to the <Modal /> element.

Ruthi