26

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

            },

        });

    }

});
Jitesh Sojitra
  • 3,655
  • 7
  • 27
  • 46
  • 1
    if you are having this problem within a bootstrap modal dialog, refer to this question https://stackoverflow.com/q/18487056/833732 – wencha Apr 22 '21 at 20:10

5 Answers5

53

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

Dev Rathi
  • 703
  • 6
  • 8
50

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")
});
Saket Patel
  • 6,573
  • 1
  • 27
  • 36
  • What about dynamic models? I have this separated form with locations and entire system uses it in different parts. – Marcelo Agimóvel Jun 21 '18 at 19:22
  • 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. – KimvdLinde May 15 '19 at 14:19
  • i cannot fix this issue for over a year, really useful! – Sruit A.Suk Mar 15 '21 at 10:39
2

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()
  });
})
estani
  • 24,254
  • 2
  • 93
  • 76
0

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

John Muraguri
  • 426
  • 7
  • 6
0

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

Habeeb Rahman
  • 1
  • 1