search box not allow input in select2-search div

Question

I have HTML code like this:

<span class="select2-container select2-container--default select2-container--open" style="position: absolute; top: 139px; width: 314px; left: 579.5px;">
    <span class="select2-dropdown select2-dropdown--below" dir="ltr">
        <span class="select2-search select2-search--dropdown">
            <input class="select2-search__field" type="search" tabindex="0" role="textbox">
        </span>
        <span class="select2-results">
            <ul class="select2-results__options" role="tree" id="select2-teamid-results" aria-expanded="true" aria-hidden="false">
                <li class="select2-results__option" id="select2-teamid-result-3jny-2" role="treeitem" aria-selected="false">aaa</li>
                <li class="select2-results__option select2-results__option--highlighted" id="select2-teamid-result-coe9-5" role="treeitem" aria-selected="false">bbb</li>
            </ul>
        </span>
    </span>
</span>

, which is the dropdown part of a dropdownlist. When the dropdownlist (not including the dropdown part) is inside the panel-body class div, the search box allows input. When the dropdownlist is inside the modal-body class div, the search box doesn't allow input. The search box code is <input class="select2-search__field" type="search" tabindex="0" role="textbox">.

I have tried setting the 'readonly' attribute of the input box to false, but it doesn't work.

Relevant js file is 'select2.min.js'.