Select2 does not close the choices box on clicking outside it (with closeOnSelect=false)

Question

JSFiddle: http://jsfiddle.net/xpvt214o/776660/

When the choice box is open, if you try clicking anywhere outside on the level of the choice box, it doesn't get closed. However, if you click outside on the level of the Current-Selection line, then it does get closed.

How can I force the Select2 choice box to close when any outside click is performed, including on the level of the choice box?

P.S. I am using the closeOnSelect: false option to keep the choice box always open during the selection process -- but it should still close on an outside click,

$('#dropdown').select2({
    closeOnSelect: false
});

Another similar question - closing select2 on click away when closeonselect is false

Wheelwright

Answer 1

Don't know what causes the problem, but adding this to your CSS 'fixes' it

Select2 Issue 4939

html,
body{
  height: 100%;
}

Updated code

/* Scroll CurrSel SPAN to bottom on every Select2 Select event */
$('#dropdown').on("select2:selecting", function(e) {
  var currselspan = $('#dropdown').next().find('.select2-selection--multiple').first();
  console.log('scrollTop = ' + $(currselspan).scrollTop() + ' scrollHeight = ' + $(currselspan).prop('scrollHeight'));
  $(currselspan).scrollTop($(currselspan).prop('scrollHeight'));
});



$('#dropdown').select2({
  closeOnSelect: false,
});

.select2-selection--multiple {
  height: 2rem;
  max-height: 2rem;
  overflow: auto;
}

html,
body {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<div style="width: 50%">
  <select id="dropdown" style="width: 100%" multiple>
    <option>TEST ELEMENT 1</option>
    <option>TEST ELEMENT 2</option>
    <option>TEST ELEMENT 3</option>
    <option>TEST ELEMENT 4</option>
    <option>TEST ELEMENT 5</option>
    <option>TEST ELEMENT 6</option>
    <option>TEST ELEMENT 7</option>
    <option>TEST ELEMENT 8</option>
    <option>TEST ELEMENT 9</option>
    <option>TEST ELEMENT 10</option>
    <option>TEST ELEMENT 11</option>
    <option>TEST ELEMENT 12</option>
    <option>TEST ELEMENT 13</option>
  </select>
</div>

Fanchet

thanks, that fixed it. I also tried a custom $(document).click() handler but it could never intercept my clicks in that area, so I had to go with this CSS solution. – Wheelwright