Select2 dropdown doesn't close on click
I'm using Select2 (v4) in a multiple select form and having difficulty getting the dropdown close functionality I need. I have closeOnSelect set to false, so the user can add multiple values easily. What I'm seeing on a test site is that on all browsers except iOS, when you click outside of the dropdown area, the dropdown closes (which is the desired behavior). On iOS, the only way to get it to close is to click inside the input.
Oddly enough, in trying to replicate via jsfiddle, I can only get version 4 of Select2 to behave the way I'm seeing it on iOS - http://jsfiddle.net/8g27t277/
I have another jsfiddle using Select2 v3.4.6 which shows the click-to-close functionality I want across all browsers - http://jsfiddle.net/0tefq3yz/
Test 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>
Test js:
$('#options').select2({
"placeholder": "Pick multiple options",
"multiple": true,
"closeOnSelect": false
});
What's causing the dropdown to close (or not) in response to click events outside the input?
Answer
I do have the same problem, after a while i found out that clicking on a html page won't do the job. Select 2 dropdown close will work alone inside body tag. If you have entire page spanned (entire page covered in a body tag), then clicking any where will close the dropdown.
***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
});