title: Select2 v4 and Bootstrap v4 - missing dropdown
body: <p>Trying to implement Select2 (v4) on Bootstrap (v4) page, but Dropdown is not rendered
  on templateResult: formatState, though entries are shown in the Select2 Box.
  And it's all fine in the reverse case when templateResult is not used.</p>
  <p>The page is loaded via GET and java jsp.
  jQuery:</p>
  <pre class="lang-js prettyprint-override"><code>$(&quot;#country&quot;).select2({
    templateResult: formatState,
    templateSelection: formatStateOnChoose,
    placeholder: &quot;select Country&quot;,
    dropdownAutoWidth : true
  });
  </code></pre>
  <h3>Libs I'm using:</h3>
  <ul>
  <li><a href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js" rel="nofollow noreferrer">https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js</a></li>
  <li><a href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="nofollow noreferrer">https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js</a></li>
  <li><a href="https://code.jquery.com/jquery-3.3.1.slim.min.js" rel="nofollow noreferrer">https://code.jquery.com/jquery-3.3.1.slim.min.js</a></li>
  <li><a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" rel="nofollow noreferrer">https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js</a></li>
  </ul>
  <h3>Pictures:</h3>
  <p>Test picture:</p>
  <p><a href="https://i.stack.imgur.com/XTWLQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XTWLQ.jpg" alt="test pic 1" /></a></p>
  <p>Result picture:</p>
  <p><a href="https://i.stack.imgur.com/x6ZyY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x6ZyY.jpg" alt="result pic" /></a></p>