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

user_4859833 0
Viewed 19661

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

            },

        });

    }

});
jquery-select2 jquery
5 Answers

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

user_53139880

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

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

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

user_27421170

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

user_97483320
Related