» » » Select2 plugin does not function properly in bootstrap modal

Select2 plugin does not function properly in bootstrap modal

posted in: Select2
1 min read

Yii version 2.0.13.1

Select2 plugin is very useful plugin when you are building the custom application or website.

 

Problem

When I use the select2 inside a bootstrap modal. I can not type anything in the input field that attaches to the plugin.

 

Cause

This issue occurs because the Bootstrap modal¬†tends to steal focus from other elements outside of the modal. Since by default, Select2 attaches the dropdown menu to the <body> element, it is considered “outside of the modal”.

 

Solution

Attach the dropdown to the modal itself with the dropdownParent setting:

 

Example

$('#mySelect2').select2({
    dropdownParent: $('#myModal')
});

If you use the Select2 on the main page that you trigger the bootstrap modal, you just add dropdownParent to <body>.