title: search box not allow input in select2-search div
body: <p>I have HTML code like this:</p>
  
  <pre><code>&lt;span class="select2-container select2-container--default select2-container--open" style="position: absolute; top: 139px; width: 314px; left: 579.5px;"&gt;
      &lt;span class="select2-dropdown select2-dropdown--below" dir="ltr"&gt;
          &lt;span class="select2-search select2-search--dropdown"&gt;
              &lt;input class="select2-search__field" type="search" tabindex="0" role="textbox"&gt;
          &lt;/span&gt;
          &lt;span class="select2-results"&gt;
              &lt;ul class="select2-results__options" role="tree" id="select2-teamid-results" aria-expanded="true" aria-hidden="false"&gt;
                  &lt;li class="select2-results__option" id="select2-teamid-result-3jny-2" role="treeitem" aria-selected="false"&gt;aaa&lt;/li&gt;
                  &lt;li class="select2-results__option select2-results__option--highlighted" id="select2-teamid-result-coe9-5" role="treeitem" aria-selected="false"&gt;bbb&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/span&gt;
      &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>, 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 <code>&lt;input class="select2-search__field" type="search" tabindex="0" role="textbox"&gt;</code>.</p>
  
  <p>I have tried setting the 'readonly' attribute of the input box to false, but it doesn't work.</p>
  
  <p>Relevant js file is 'select2.min.js'.</p>