Select2 not working inside bootstrap modal

Question

I am trying to use select2 inside bootstrap modal but it is not getting the focus automatically as well as down and up arrows are not working for the populated list.

The same select2 works when I put it outside the modal popup.

When I searched, I found many are facing this same problem and found this post

Select2 doesn't work when embedded in a bootstrap modal

I implemented both the solutions from it

1. Removed tabindex from modal popup.
2. Commented code of enforceFocus function in modal.js file.

But it is still not working! Any idea what I could still be missing?

Edit1

It works on firefox when tabindex is removed from the modal div but not with IE9

Edit2

I found that removing tabindex is actually not getting recognized by IE9 because I can still hide the popup by escape key in IE but not in Firefox.

Answer 1

Use bellow code. This will solve your bug.

$('select').select2({
    dropdownParent: $('#my_amazing_modal')
});