Select2 4.0.0 AJAX - Choose highlighted option with Tab
I've been trying to find a solution to this problem as well.
The main issue is that the select2 events doesn't provide any insight as to which key was pressed.
So I've come up with this hack to access the keydown event inside a select2 context.
I've been testing it to the best of my abilities and it seems to work perfectly.
selectElement
.select2({ options ... })
.on('select2:close', function(evt) {
var context = $(evt.target);
$(document).on('keydown.select2', function(e) {
if (e.which === 9) { // tab
var highlighted = context
.data('select2')
.$dropdown
.find('.select2-results__option--highlighted');
if (highlighted) {
var id = highlighted.data('data').id;
context.val(id).trigger('change');
}
}
});
// unbind the event again to avoid binding multiple times
setTimeout(function() {
$(document).off('keydown.select2');
}, 1);
});
The selectOnClose feature seems to be stable in 4.0.3, and a much simpler solution:
$("#user-select").select2({
...
selectOnClose: true
});
It's possible that the use of templates interferes with this feature, I'm not using one so I haven't tested that.