How to trigger tag creation in select2 single select (e.g. when adjacent button is pressed)?

Question

I am using select2 4.0.3. I have a select2 box to enter email addresses, and I would like to make sure that all email addresses are included in .val(), also the one that the user was still typing in the search field.

The form field is referenced by $('.invite-emails-field'). When I press the Send button, in the event handler $('.invite-emails-field').val() just gives me the first two addresses [email protected] and [email protected], but not the third address ([email protected]).

This is how I initialize the select2 element:

$('.invite-emails-field').select2({
  tags: true,
  tokenSeparators: [',', ' '],
  selectOnBlur: true
});

The selectOnBlur has no effect, and I cannot find anything else that works on select2 v4. I tried firing several events at various elements, none of it worked.

I expect that when I press the Send button, that I can make some call to the select2 box to trigger creating a tag for the contents of whatever is then in the search field [email protected], and that subsequently .val() returns an array with all three addresses.

Update: I created a jsFiddle for you to play with. Enter input like this:

and then press the Send button, you will see:

where [email protected] is missing from the output.

Note that in my real application I have disabled the dropdown because I just want the tagging behaviour.

Pettway

Would you happen to be able to create a fiddle that we could demo? – Amygdaline

@SamHolmes Thanks for looking into this, I have created a minimal jsFiddle that shows the problem and added this as update to my question. The link is jsfiddle.net/cn19gmfq – Pettway

Updated link: jsfiddle.net/mjdemilliano/cn19gmfq/8 – Pettway

That fiddle does not allow me to type in email addresses like [email protected] - after the @ symbol I cannot continue to type anything. How do you enter them? – Culet

Answer 1

You need to add selectOnClose and set it to true so that it creates the tag for you when you close / click off of the search input.

$('select').select2({
  selectOnClose: true
});

See the official documentation here: https://select2.github.io/options.html#can-i-select-the-highlighted-result-when-the-dropdown-is-closed

Fogy

It works, thanks! I'm sure though that at some point I tried that but anyways... By the way, having spent some quality time with select2 recently: is it just me or is the documentation on select2 v4 severely lacking?? I would not have guessed by the title of the link you posted that this option has anything to do with my problem. I'm not thinking in terms of "closing the dropdown" (in fact I have disabled it on my actual site because I just want the tagging behaviour), I'm just pressing another button somewhere else on the form and want to read all the current values in the select box. – Pettway