JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.min.js"></script>
<link rel="stylesheet" href="http://select2.github.io/select2/bootstrap/css/bootstrap.css">
<p>When the list is open, clicking on Apply triggers the mouseup event, but not the click event.</p>
<select id="list1" class="select2" multiple="multiple">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
</select>
<button id="applyButton">Apply</button>

JavaScript

$("#list1").select2({
        closeOnSelect: true,
        width: 150
    });

$("#applyButton").click(function(){console.log('button click')});
$("#applyButton").mouseup(function(){console.log('button mouseup')});