Bootstrap dropdown gets closed on clicking select box

I was trying to add a custom select box built using select2 plugin inside a bootstrap dropdown, but when I click the select box the bootstrap dropdown is getting closed. Can anyone help me, please?

HTML

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    <select class="select">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </ul>
</div>

Javascript

$(".select").select2({
  minimumResultsForSearch: -1,
});

I have simulated my problem in the following jsfiddle:

https://jsfiddle.net/arunvenugopal11/qmh7jt5j/4/