Select2 dropdown doesn't close on click

Question

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?

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, Jul 16 '15 at 21:19
please view my comment at link https://stackoverflow.com/a/46251972/2134005 — dang.khoa.1989.2010, Sep 16 '17 at 08:52

score 2 · Answer 1 · answered Feb 11 '16 at 13:45

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.

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
});

score 2 · Answer 2 · edited May 23 '17 at 10:29

2

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.
}

edited May 23 '17 at 10:29

Community

1
1

answered Sep 14 '16 at 07:50

btemperli

271
1
5
13

score 1 · Answer 3 · answered Mar 11 '21 at 16:53

1

This one helps me. This identify only IOS devices and fix with this cursor

@supports (-webkit-touch-callout: none) {
  body {
    cursor: pointer;
  }
}

answered Mar 11 '21 at 16:53

despotbg

740
6
12

this is the only solution that really helped me out – Ricardinho Apr 09 '21 at 06:55

Select2 dropdown doesn't close on click

3 Answers3