Select2 selection is not closed by pressing
I am using Select2 (v4) in a multiple choice form and have difficulty accessing the dropdown functionality I need. I have closeOnSelect
a value set false
so user can add multiple values easily. What I see on the test site is that in all browsers except iOS, clicking outside the dropdown area will close the popup (which is the desired behavior). On iOS, the only way to close it is by clicking inside the entrance.
Oddly enough, when trying to replicate via jsfiddle I can only get version 4 of Select2 to behave as I see it on iOS - http://jsfiddle.net/8g27t277/
I have another jsfiddle using Select2 v3.4.6 that shows the click-to-close functionality I want in all browsers - http://jsfiddle.net/0tefq3yz/
Testing HTML:
<select id="options" size="9">
<option value="357">One</option>
<option value="358">Two</option>
<option value="359">Three</option>
<option value="360">Four</option>
<option value="361">Five</option>
</select>
Js test:
$('#options').select2({
"placeholder": "Pick multiple options",
"multiple": true,
"closeOnSelect": false
});
What causes the dropdown to close (or not) in response to click events outside the input?
source to share
I have the same problem, after a while I found out that clicking on the html page won't do the job. Select 2 dropdown will only work inside the body tag. If you have a whole page (whole page in a body tag) then click any where the dropdown will be closed.
***HTML***
<body class='bodyClass'>
<div class='mainClass'>
<select id="options" size="9">
<option value="357">One</option>
<option value="358">Two</option>
<option value="359">Three</option>
<option value="360">Four</option>
<option value="361">Five</option>
</select>
***CSS***
select {
width: 300px;
}
.bodyClass{
width:100%;
height:500px;
}
***JS***
$('#options').select2({
"placeholder": "Pick multiple options",
"multiple": true
});
source to share
I found the same solution as Venkata Sandeep , if your element is body
not full height and you only click on an element html
on your page then the dropdown will not be closed.
I solved it by changing the body size:
// CSS for the body element
body {
min-height: 100vh;
width: 100%; // probably you won't need the width.
}
source to share
Add a library with a full set of functions, this will solve the problem instead of using min.js. https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.full.js
source to share