CODEWITHSUNDEEP
jqueryjquery-select2
Jitesh Sojitra
Jitesh Sojitra

Reputation: 4043

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

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

            },

        });

    }

});

Upvotes: 29

Views: 25537

Answers (5)

estani
estani

Reputation: 26497

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

Upvotes: 4

Habeeb Rahman
Habeeb Rahman

Reputation: 31

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

Upvotes: 3

John Muraguri
John Muraguri

Reputation: 504

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

Upvotes: 0

Dev Rathi
Dev Rathi

Reputation: 771

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

Upvotes: 56

Saket Patel
Saket Patel

Reputation: 6673

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

Upvotes: 57

Related Questions