CODEWITHSUNDEEP
jqueryjquery-select2
gene b.
gene b.

Reputation: 12026

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

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

Upvotes: 5

Views: 11999

Answers (1)

Juan
Juan

Reputation: 5050

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>

Upvotes: 8

Related Questions