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

Select2 plugin does not function properly in bootstrap modal

posted in: Select2 | 0

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>.