You need to check the demos and docs pages for the widget.

The Select2 widget works perfectly with modal. You need to set the Modal markup correctly for it to work. Check the demo page and scroll down to button for example for Select2 inside a MODAL.

Note the important setting for the Modal dialog... the tabindex must NOT be set and must be set to false as shown.

Ok. Thanks. It's just that it worked fine before, even without setting 'tabindex' => false. Have quite few places to update now :)

thx

sorry for open this issue again,
now i found that problem again
cannot any typing on this widget in modal
and i see tab-index=-1
how can i solve this problem, thanks

how to set it required like HTML 5 validation
'required' => 'required' inside options isn't working
it should shown a required pop-up

Can't type anything if select2 in modal when using Firefox, Chrome works fine. Can you help me with this? thank you!

https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal

Although I have it working in a bootstap modal... it works in chrome... but not in firefox...
Any ideas ?
I was so flabbergasted by this that I did not see the previous post...

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

worked for me

$.fn.modal.Constructor.prototype.enforceFocus = $.noop;

You may want to set dropdownParent property of Select2 to the Modal Dialog identifier for addressing this (have not tested this though... for example):

echo Select2::widget([ 
    'pluginOptions' => [
        'dropdownParent' => new yii\web\JsExpression('$("#modalDialogId")'), 
    ],
   // your other select2 widget settings
]);

Kartik's last example is the PROPER solution of the three, but it should really be:

echo Select2::widget([ 
    'pluginOptions' => [
        'dropdownParent' => new JsExpression('$("#modalDialogId")'),
    ],
   // your other select2 widget settings
]);

(of course you should substitute modalDialogId with the actual ID of the modal dialog)

Summarizing it all:
The problem is Bootstrap Modal inserting some js that grabs the focus of anything not inside of the modal. The Select2 drop-down is actually rendered outside of the Modal DOM element. There are three ways to fix this:

1. Make sure that the rendered modal does not have tabIndex="whatever" inside of it. This is the solution employed in Kartik's docs here: ()

Modal::begin([
'options' => [
'id' => 'kartik-modal',
'tabindex' => false, 
...

This is also the "accepted" solution here:
Unfortunately, it is a hack and has some side-effects like breaking the ESC key to exit the modal, and scrolling issues if the modal is very long.

2. It is also possible to disable the Bootstrap Modal from trying to prevent focus from other elements when it's shown:

// Do this before you initialize any of your modals
$.fn.modal.Constructor.prototype.enforceFocus = function() {};

This is detailed also on the link above as well as here:
But again, this is a hack and has side-effects.

3. The PROPER solution is to let Select2 know that it should attach itself to the modal (or one of it's children, like the modal body).
   This is also described in the two links above and mentioned above by Kartik.

To implement the proper solution that doesn't break intended bootstrap modal functionality, do what is written at the top of this post!