Select2 Closes Modal on Clicking it

I have 7 SELECT2 Elements on my Modal, at first, I was unable to search on the select2 elements. I then added this line of code when I’m about to show the Modal

$(‘#my-select’).select2({ dropdownParent: $(‘#my-modal’) }),

and I was able to search on the select elements. Now the problem is sometimes when I click on one of the options in select2, it automatically closes the Modal.

Answer

I experienced this same problem, but as you can find in the original documentation. you can override Bootstrap’s behavior by placing

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Before initialize any of the modals.

check https://select2.org/troubleshooting/common-problems for further explanation