Close programmatically after selection?

[lind...@wearetelegraph.com]

Hi,

After a user has made a selection by either adding a tag or selecting one from the list, I'd like to simply close select2, but the following throws an error and behaves oddly:

var $bucketSelect = $("#bucket-select");

$bucketSelect.select2({
data: allBuckets,
tags: true,
tokenSeparators: [','],
allowClear: false,
}).on("change", function() {
$bucketSelect.select2("select2:close");
console.log('change');
});

This closes select2 but throws this error:

"TypeError: Cannot read property 'apply' of undefined" on this line: https://github.com/select2/select2/blob/master/dist/js/select2.js#L5530

After that, adding and seraching tags behaves oddly (new tags can't be created, and after existing tags are queried and selected, the text typed to query for them remains instead of starting you out with a new blank slate).

What gives? How do you trigger this simple function and programmatically close select2 without breaking everything?

Thanks,
L

[Kevin Brown]

The correct call to force Select2 to close is `.select2('close')`, as demonstrated in the examples. You are getting the error because `select2('select2:close')` is not a valid call, we only use `select2:close` for the DOM event that is triggered when the dropdown closes.

--
You received this message because you are subscribed to the Google Groups "select2" group.
To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
To post to this group, send email to sel...@googlegroups.com.
Visit this group at https://groups.google.com/group/select2.
For more options, visit https://groups.google.com/d/optout.

[lind...@wearetelegraph.com]

Thanks, Kevin. That does work well for the example you referenced, but I'm still trying to work out the following:

After the user has made a selection (typed something and pressed enter, or selected an option from the dropdown), I'd like to close select2 (unfocus them from that step, essentially), but trying to trigger close from inside a change event doesn't yield results:

```

$bucketSelect.select2({
data: allBuckets,
tags: true,

}).on("change", function() {
$bucketSelect.select2("close");
console.log('change');
});
```

Any ideas?
Thanks in advance!

[Kevin Brown]

It actually just hit me that Select2 should automatically close after a selection is made, because `selectOnClose` should default to `true`. Are you seeing something different?

 

You also would likely have to set a timeout for calling the `close` method within the `change` event, because JavaScript events are run synchronously and Select2 will try to close itself after the event is triggered.

 

If there are still issues, it might be useful to put your code into a jsbin/jsfiddle so we can test it out in a controlled live environment.

--