JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="plain" size="3">
  <option value="first">First</option>
  <option value="second">Second</option>
  <option value="third">Third</option>
  <option value="fourth">Fourth</option>
</select>

<select id="fancy" size="3" style="width: 100px">
  <option value="first">First</option>
  <option value="second">Second</option>
  <option value="third">Third</option>
  <option value="fourth">Fourth</option>
</select>

CSS

.select2-container--default .select2-results > .select2-results__options {
    max-height: 90px
}

.select2-selection__arrow {
    display: none
}

JavaScript

var list = $("#fancy").select2({
      closeOnSelect: false
    }).on("select2:closing", function(e) {
      e.preventDefault();
    }).on("select2:closed", function(e) {
      list.select2("open");
    });
    list.select2("open");