CODEWITHSUNDEEP
javascriptjqueryiosjquery-select2jquery-select2-4
nkanderson
nkanderson

Reputation: 483

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?

Upvotes: 5

Views: 12792

Answers (3)

despotbg
despotbg

Reputation: 778

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

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

Upvotes: 1

btemperli
btemperli

Reputation: 271

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

Upvotes: 2

Venkata Sandeep
Venkata Sandeep

Reputation: 191

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

Upvotes: 2

Related Questions