Select2 не закрывает окно выбора при нажатии вне его (с closeOnSelect = false) - PullRequest
Новая
       6

Select2 не закрывает окно выбора при нажатии вне его (с closeOnSelect = false)

0 голосов
/ 12 сентября 2018

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

Когда окно выбора открыто, если вы попытаетесь щелкнуть где-нибудь за пределами на уровне поля выбора , оно не закроется.Однако, если вы щелкнете снаружи на уровне строки Current-Selection, она закроется.

Как заставить принудительно закрыть окно выбора Select2 при выполнении любого внешнего щелчка, в том числе на уровнеполе выбора?

PS Я использую опцию closeOnSelect: false, чтобы окно выбора оставалось всегда открытым во время процесса выбора, но оно все равно должно закрываться при внешнем щелчке, 

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

Еще один похожий вопрос - закрытие select2 при нажатии, когда closeonselect имеет значение false

1 Ответ

0 голосов
/ 12 сентября 2018

Не знаю, что вызывает проблему, но добавление этого в ваш CSS исправляет это

Выбрать2 Выпуск 4939 

html,
body{
  height: 100%;
}

Обновленный код 

/* 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>
...