select2: Can't type in Select2 dropdown input search field

Is the problem releated to #4871?

You could try to define the parameter “DropdownParent” of the select2 element. The name given to the parameter is the name of the modal form where the select2 is placed on. Here below an example of how to use this parameter.

$(document).ready(function() {
      $("#select2insidemodal").select2({
              dropdownParent: $("#myModal")
      });
});

remove “tabindex” attribute from modal

Have you tried setting dropdownParent? See https://select2.org/troubleshooting/common-problems#select2-does-not-function-properly-when-i-use-it-inside-a-bootst

Good catch 😃 Issue is fixed, here is the solution. No need to write in document.ready, mention inside jquery modal dialog code:

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,
						dropdownParent: $("#modelDialog1")
					});
	    },

removing “tabindex” from #mymodal solves the problem…

Is the problem releated to #4871?

You could try to define the parameter “DropdownParent” of the select2 element. The name given to the parameter is the name of the modal form where the select2 is placed on. Here below an example of how to use this parameter.

$(document).ready(function() {
      $("#select2insidemodal").select2({
              dropdownParent: $("#myModal")
      });
});

@ProgrammingTestGitHub It works. Thanks

Tried this code but no luck:

$(document).ready(function () {

	$("#sRelease").select2({
		dropdownParent: $("#modelDialog1")
	});
	
	$.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" );

		    },

		});

	    }

	});

});

remove “tabindex” attribute from modal

thank you so much, it solve my proplem.

I was about to go nuts until I came across this solution posted above :

$(document).ready(function() { $("#select2insidemodal").select2({ dropdownParent: $("#myModal") }); });

I am transitioning my site to Bootstrap 4 (from 3) and my old tricks for select2 in modals were not working. It was deja vu all over again. This actually worked for me!

a working example,

$(document).ready(function() {
        $('#myModalId').on('shown.bs.modal', function () {
            $("#select2insidemodal").select2({
                dropdownParent: $("#myModalId")
            });
        });
    });

remove “tabindex” attribute from modal

That worked. But why?