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 - /
I have another jsfiddle using Select2 v3.4.6 which shows the click-to-close functionality I want across all browsers - /
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?
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/8g27t277/
I have another jsfiddle using Select2 v3.4.6 which shows the click-to-close functionality I want across all browsers - http://jsfiddle/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?
Share Improve this question asked Jul 14, 2015 at 1:41 nkandersonnkanderson 4831 gold badge8 silver badges22 bronze badges 2- Clicking on the dropdown input is actually the only thing that does cause it to close, so I'm not sure I understand what you're saying. Can you elaborate? – nkanderson Commented Jul 16, 2015 at 21:19
- please view my ment at link stackoverflow./a/46251972/2134005 – dang.khoa.1989.2010 Commented Sep 16, 2017 at 8:52
3 Answers
Reset to default 2I 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.
here is updated JSFiddle
***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
});
I found the same solution as Venkata Sandeep, if your body-element is not full height and you click only on the html-element on your page, then the dropdown would not close.
I solved it by resizing the body:
// CSS for the body element
body {
min-height: 100vh;
width: 100%; // probably you won't need the width.
}
This one helps me. This identify only IOS devices and fix with this cursor
@supports (-webkit-touch-callout: none) {
body {
cursor: pointer;
}
}