I am using the latest version of select2 that is 4.0.7, installed from yarn. Right now, option box is losing focus when I suppose to write a tag and then hit enter or put “,”(token separator). Where I am missing?
Here is my code-
$(’.multi-select2-plugin’).select2({
tags: true,
tokenSeparators: [’,’],
});
Right now, I am working on the multi-tagging feature using this plugin, Now, I want to retain focus whenever I hit enter or use token separator. Your response will be highly appreciable.
I don’t think you’re doing anything “wrong”, and it’s not exactly a bug in Select2, although I agree that it doesn’t work as most people would expect it to in this situation. Note that if you use the space character as a separator it works as you’d expect, because pressing space—in addition to signalling the end of the tag—activates the Select2 again. However, no other character does this. (You could argue that this is the “bug”, and that any character listed in the tokenSeparators array should also behave the same as the space character does.)
The easiest way to “fix” this is to specify closeOnSelect: false in your Select2 initialization object:
$('.multi-select-plugin').select2({
closeOnSelect: false,
tags: true,
tokenSeparators: [','],
});
This will prevent the Select2 from closing when a selection is made; the default value for this option is true, which closes the Select2 after a selection. Note that if you do this, the user will have to press Escape or Tab, or click somewhere else on the page, to close the Select2. This would be the case even if you make a selection from the dropdown rather than typing a tag.