This has been the subject of the following similar SO Question and several github issues including:
Stack Overflow - jQuery Select2 Tag on Blur
#4578 - Tab and Esc should select the option
#4820 - TAB should select a result #4820
#3472 - Arrow keys do not change value of select
But the suggested solutions or questions have treated all blur events equally, regardless of how they were invoked. With most answers leveraging Automatic selection by setting selectOnClose.
Ideally, clicking off the dropdown (escaping) after merely hovering over options should not change the value:
How can you update the selection on tabout, but not other close events?
Here's an MCVE in jsFiddle and StackSnippets:
$('.select2').select2({});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<div class="form-control">
<label for="foods2">Select2</label>
<select id="foods2" class="select2" >
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Donut</option>
</select>
</div>
This could be trivially handled by modifying the original source code on line 323 which treats tabs and esc keys identically:
if (key === KEYS.ESC || key === KEYS.TAB || (key === KEYS.UP && evt.altKey)) {
self.close();
evt.preventDefault();
}
But third party libraries should ideally be modified with a pull request. So we have a couple problems in creating a wrapper for this. Principally, detecting a tab keypress event is hard. If we catch it too late, another action might have superseded it or it might be fired on another field altogether.
The landscape of capturing tab events and persisting information seems to fall into two buckets:
Monitor before tab press and also after closed
Intercept tab press and modify synchronously
In either case, we must know that a tab key was the offending item that caused the menu to close.
If we listen for keypress events with tab, on an open input, they'll either occur from .select2-selection if there's no search or select2-search__field if search is enabled.
$("body").on('keydown', e => { if (e.keyCode === 9) console.log(e.target) });
However, if we setup as a delegated handler, as we have above, by the time the event bubbles up all the way up to "body", the menu has already closed, thus clearing the currently highlighted item and even our indicator of whether or not we started as open.
We can intercept before the menu closes by registering for the select2:closing event like this:
$("body").on('select2:closing', e => { console.log(e,e.target) });
However, select 2 doesn't persist the original event information and instead makes their own new jQueryEvent, so we don't yet know if we're closing due to a tab event (the body.keypress event fires afterward)
Solution
We'll monitor the select2:closing event and capture what we need to know. Next we need to attach a handler that listens for the subsequent firing of the initial click or a key stroke as the event pipeline is finished. We need to fire this once and only once for every close option. To do so we can use this extension $.fn.once. If it was raised by a tab, it'll update whatever value detected during closing. If not, that value and handler will disappear.
All told, it should look like this:
// monitor every time we're about to close a menu
$("body").on('select2:closing', function (e) {
// save in case we want it
var $sel2 = $(e.target).data("select2");
var $sel = $sel2.$element;
var $selDropdown = $sel2.$results.find(".select2-results__option--highlighted")
var newValue = $selDropdown.data("data").element.value;
// must be closed by a mouse or keyboard - listen when that event is finished
// this must fire once and only once for every possible menu close
// otherwise the handler will be sitting around with unintended side affects
$("html").once('keyup mouseup', function (e) {
// if close was due to a tab, use the highlighted value
var KEYS = { UP: 38, DOWN: 40, TAB: 9 }
if (e.keyCode === KEYS.TAB) {
if (newValue != undefined) {
$sel.val(newValue);
$sel.trigger('change');
}
}
});
});
$.fn.once = function (events, callback) {
return this.each(function () {
$(this).on(events, myCallback);
function myCallback(e) {
$(this).off(events, myCallback);
callback.call(this, e);
}
});
};
Working demo in jsFiddle and StackSnippets:
$('.select2').select2({});
// monitor every time we're about to close a menu
$("body").on('select2:closing', function (e) {
// save in case we want it
var $sel2 = $(e.target).data("select2");
var $sel = $sel2.$element;
var $selDropdown = $sel2.$results.find(".select2-results__option--highlighted")
var newValue = $selDropdown.data("data").element.value;
// must be closed by a mouse or keyboard - setup listener to see when that event is completely done
// this must fire once and only once for every possible menu close
// otherwise the handler will be sitting around with unintended side affects
$("html").once('keyup mouseup', function (e) {
// if close was due to a tab, use the highlighted value
var KEYS = { UP: 38, DOWN: 40, TAB: 9 }
if (e.keyCode === KEYS.TAB) {
if (newValue != undefined) {
$sel.val(newValue);
$sel.trigger('change');
}
}
});
});
$.fn.once = function (events, callback) {
return this.each(function () {
$(this).on(events, myCallback);
function myCallback(e) {
$(this).off(events, myCallback);
callback.call(this, e);
}
});
};
.form-control {
padding:10px;
display:inline-block;
}
select {
width: 100px;
border: 1px solid #aaa;
border-radius: 4px;
height: 28px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<div class="form-control">
<label for="foods2">Select2</label>
<select id="foods2" class="select2" >
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Donut</option>
</select>
</div>
I am using a datalist and need to detect when the user selects something from the drop-down list. A similar question has been asked BUT I need it so that the event fires ONLY when the user selects something from the datalist. If they type something in the input then I do NOT want the event to fire. (Notice in the accepted answer to the question I linked that they bind the input, which is not what I want). I've tried (with no success):
<datalist>
<option>Option 1 Here</option>
<option>Option 2 Here</option>
</datalist>
$(document).on('change', 'datalist', function(){
alert('hi');
});
EDIT:
This question is different than the suggested question because it's a completely different question.
You can manually check it on change. But you need to check change of the input of datalist.
FIDDLE
$(document).on('change', 'input', function() {
var options = $('datalist')[0].options;
var val = $(this).val();
for (var i = 0; i < options.length; i++) {
if (options[i].value === val) {
console.log(val);
break;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input list="ff">
<datalist id="ff">
<option>Option 1 Here</option>
<option>Option 2 Here</option>
</datalist>
In browser with the inputType property on the InputEvent you can use that to filter out any unwanted onInput events. This is "insertReplacementText" on Firefox 81 and null for Chrome/Edge 86. If you need to support IE11 you will need to validate the value is valid.
document.getElementById("browser")
.addEventListener("input", function(event){
if(event.inputType == "insertReplacementText" || event.inputType == null) {
document.getElementById("output").textContent = event.target.value;
event.target.value = "";
}
})
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<div id="output">
</div>
The solutions above all have a big problem. If the datalist has the option of (for example) "bob" and "bobby", as soon as someone types "bob", they code immediately says it's the same as clicking "bob"... but what if they were attempting to type "bobby"?
For a better solution, we need some more information. When listening for the 'input' event on the input field:
In Chromium-based browsers, when you type, delete, backspace, cut, paste, etc. in an input field, the event that is passed to the handler is an InputEvent, whereas when you select an option from the datalist, the event is just an Event type with a property of type that equals 'input'. (This is also true during an auto-fill, at least with BitWarden).
So you can listen for an 'input' event and check to see if it's an instance of InputEvent to determine if it's from autofill (which I think should be allowed since most of the time autofill won't be filling these types of fields, and if they do, it's usually a legit choice) / datalist selection.
In Firefox, it's different, though. It still provides an InputEvent, but it has an inputType property with the value of "insertReplacementText", which we can also use. Autofill does the same thing as Chromium browsers.
So here's a better solution:
$('#yourInput').on('input', function(){
if (
!(e instanceof InputEvent) ||
e.inputType === 'insertReplacementText')
) {
// determine if the value is in the datalist. If so, someone selected a value in the list!
}
});
I wish the browsers had the same implementation that had an event type/property that was exclusive to datalist selection, but they don't so this is the best I've got. I haven't tested this on Safari (I don't have access or time right now) so you should probably take a look at it and see if it's the same or has other distinguishing differences.
UPDATE:
I noticed that if you already have the full word typed up (e.g. you typed in "Firefox") and then selected the option that matched what you had typed (e.g. you selected the "Firefox" option), it would not fire an "input" event, so you would not know that one of the options was chosen at that point. So, you'll also need a keydown/keypress/keyup event listener to listen to when they press enter. In Chromium browsers, though, it actually provides a key code of undefined when you hit enter or click on an option (yes, the click makes a keyup event). In Firefox, it says you hit Enter, but it doesn't fire any events I can find when you click an option.
Optimized Solution
$("input").on('input', function () {
var inputValue = this.value;
if($('datalist').find('option').filter(function(){
return this.value == inputValue;
}).length) {
//your code as per need
alert(this.value);
}
});
Please have look for your solution it's good to go.
Have look for Demo
$(document).on('change', 'input', function(){
var optionslist = $('datalist')[0].options;
var value = $(this).val();
for (var x=0;x<optionslist.length;x++){
if (optionslist[x].value === value) {
//Alert here value
console.log(value);
break;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input list="data">
<datalist id="data">
<option value='1'>Option 1 Here</option>
<option value='2'>Option 2 Here</option>
</datalist>
More Optimize
$("input").on('input', function () {
if($('datalist').find('option[value="'+this.value+'"]')){
//your code as per need
alert(this.value);
}
});
This might only be Chrome, untested anywhere else!, but I see a change event triggered when an option is selected. Normally change only happens in textfields when the field loses focus. The change event triggers before the blur event IF it's a normal non-datalist change, so we have to check both: we're looking for a change that's not immediately followed by a blur:
var timer;
el.addEventListener('change', function(e) {
timer = setTimeout(function() {
el.dispatchEvent(new CustomEvent('datalistchange'));
}, 1);
});
el.addEventListener('blur', function(e) {
clearTimeout(timer);
});
And then you can listen for the custom datalistchange event like normally. Or you can just put your specific logic instead of the dispatchEvent.
jsFiddle here
jQuery('input').on('input', function () {
if($('datalist[id="' + jQuery(this).attr('list') + '"]').find('option[value="'+this.value+'"]')){
//your code as per need
alert(this.value);
}
});
so it will find the datalist associated with the input
8 years, and still no good answer
Simple space-suffix trick will do what you need, add at the end of each option, and then detect (and remove) it in "input" handler
<input list="my-options" id="my-input">
<datalist id="my-options">
<option>Option 1 Here </option>
<option>Option 2 Here </option>
</datalist>
<script>
$('#my-input').on('input',function (e)
{
var v=$(e.target).val();
if (v.slice(-1)=='\xa0')
{
$(e.target).val(v=v.slice(0,-1));
console.log("option selected '"+v+"'");
};
});
</script>
I'm trying to trigger an event on an input if the input is clicked or if the input comes in to focus.
The issue i'm having is preventing the event from firing twice on the click as, obviously, clicking on the input also puts it in focus. I've put a very loose version of this on jfiddle to show you what I mean, code as below:
HTML:
<body>
<input type="textbox" name="tb1" class="input1"></input>
<label> box 1 </label>
<input type="textbox" name="tb2" class="input2"></input>
<label> box 2 </label>
</body>
JQuery
$(function () {
$('.input2').click(function() {
alert("click");
});
$('.input2').focus(function() {
alert("focus");
});
});
JSFiddle: http://jsfiddle.net/XALSn/2/
You'll see that when you tab to input2 you get one alert, but if you click you get two. Ideally for my scenario, it needs to be one alert and ignore the other. it also doesn't seem to actually focus.
Thanks in advance for any advice.
How about setting a flag on focus so we can fire on focus and ignore clicks but then listen for clicks on the focussed element too? Make sense? Take a look at the demo jsFiddle - If you focus or click on the unfocussed .index2 it triggers the focus event and ignores the click. Whilst in focus, clicking on it will trigger the click.
I have no idea why you would want this (I cant imagine anyone wanting to click on a focussed element for any reason (because the carat is already active in the field) but here you go:
$(function () {
$('.input2').on("click focus blur", function(e) {
e.stopPropagation();
if(e.type=="click"){
if($(this).data("justfocussed")){
$(this).data("justfocussed",false);
} else {
//I have been clicked on whilst in focus
console.log("click");
}
} else if(e.type=="focus"){
//I have been focussed on (either by clicking on whilst blurred or by tabbing to)
console.log("focus");
$(this).data("justfocussed",true);
} else {
//I no longer have focus
console.log("blur");
$(this).data("justfocussed",false);
}
});
});
http://jsfiddle.net/XALSn/12/
This probably won't be the best answer, but this is a way of doing it. I would suggest adding tab indexes to your inputs and firing the focus event when you blur from another input.
I've added that to this fiddle:
http://jsfiddle.net/XALSn/9/
$(function () {
$('.input2').click(function(e) {
alert("click");
e.preventDefault();
});
});
$('input').blur(function(){
$('input').focus(function() {
alert("focus");
});
});
You can use one thing I am using very often in JS
var doSomething = true;
$(function () {
$('.input2').click(function(e) {
if (doSomething) {
// do something :)
}
doSomething = false;
});
$('.input2').focus(function() {
if (doSomething) {
// do something :)
}
doSomething = false;
});
});
But You have to change value of doSomething on mouseout or foucs over etc. :)
$(function () {
var hasFocus = false;
$("body")
.off()
.on({
click : function()
{
if(!hasFocus)
{
hasFocus = true;
alert("click");
}
},
focus : function()
{
if(!hasFocus)
{
hasFocus = true;
alert("focus");
}
}
},".input2");
});
try setting a flag hasFocus and act accordingly
http://jsfiddle.net/AEVTQ/2/
just add e.preventDefault() on the click event
$(function () {
$('.input2').click(function(e) {
console.log("click");
e.preventDefault();
e.stopPropagation();
});
$('.input2').focus(function() {
console.log("focus");
});
});
If I understand your question right, the e.prevnetDefault() will prevent the browser from automatically focusing on click. Then you can do something different with the click than would with the focus
I have a form with multiple text inputs and some select2 elements.
Using the keyboard to tab between fields works fine - the Select2 element behaves like a form element and receives focus when tabbing.
I was wondering if it is possible to open the dropdown when the Select2 element gets focus.
Here's what I've tried so far:
$("#myid").select2().on('select2-focus', function(){
$(this).select2('open');
});
But using this code makes the dropdown to open again after a selection is made.
Working Code for v4.0+ *(including 4.0.7)
The following code will open the menu on the initial focus, but won't get stuck in an infinite loop when the selection re-focuses after the menu closes.
// on first focus (bubbles up to document), open the menu
$(document).on('focus', '.select2-selection.select2-selection--single', function (e) {
$(this).closest(".select2-container").siblings('select:enabled').select2('open');
});
// steal focus during close - only capture once and stop propogation
$('select.select2').on('select2:closing', function (e) {
$(e.target).data("select2").$selection.one('focus focusin', function (e) {
e.stopPropagation();
});
});
Explanation
Prevent Infinite Focus Loop
Note: The focus event is fired twice
Once when tabbing into the field
Again when tabbing with an open dropdown to restore focus
We can prevent an infinite loop by looking for differences between the types of focus events. Since we only want to open the menu on the initial focus to the control, we have to somehow distinguish between the following raised events:
Doing so it a cross browser friendly way is hard, because browsers send different information along with different events and also Select2 has had many minor changes to their internal firing of events, which interrupt previous flows.
One way that seems to work is to attach an event handler during the closing event for the menu and use it to capture the impending focus event and prevent it from bubbling up the DOM. Then, using a delegated listener, we'll call the actual focus -> open code only when the focus event bubbles all the way up to the document
Prevent Opening Disabled Selects
As noted in this github issue #4025 - Dropdown does not open on tab focus, we should check to make sure we only call 'open' on :enabled select elements like this:
$(this).siblings('select:enabled').select2('open');
Select2 DOM traversal
We have to traverse the DOM a little bit, so here's a map of the HTML structure generated by Select2
Source Code on GitHub
Here are some of the relevant code sections in play:
.on('mousedown' ... .trigger('toggle')
.on('toggle' ... .toggleDropdown()
.toggleDropdown ... .open()
.on('focus' ... .trigger('focus'
.on('close' ... $selection.focus()
It used to be the case that opening select2 fired twice, but it was fixed in Issue #3503 and that should prevent some jank
PR #5357 appears to be what broke the previous focus code that was working in 4.05
Working Demo in jsFiddle & Stack Snippets:
$('.select2').select2({});
// on first focus (bubbles up to document), open the menu
$(document).on('focus', '.select2-selection.select2-selection--single', function (e) {
$(this).closest(".select2-container").siblings('select:enabled').select2('open');
});
// steal focus during close - only capture once and stop propogation
$('select.select2').on('select2:closing', function (e) {
$(e.target).data("select2").$selection.one('focus focusin', function (e) {
e.stopPropagation();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.js"></script>
<select class="select2" style="width:200px" >
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Donut</option>
</select>
Tested on Chrome, FF, Edge, IE11
For Version 3.5.4 (Aug 30, 2015 and earlier)
The current answer is only applicable to versions 3.5.4 and before, where select2 fired blur and focus events (select2-focus & select2-blur). It attaches a one-time use handler using $.one to catch the initial focus, and then reattaches it during blur for subsequent uses.
$('.select2').select2({})
.one('select2-focus', OpenSelect2)
.on("select2-blur", function (e) {
$(this).one('select2-focus', OpenSelect2)
})
function OpenSelect2() {
var $select2 = $(this).data('select2');
setTimeout(function() {
if (!$select2.opened()) { $select2.open(); }
}, 0);
}
I tried both of #irvin-dominin-aka-edward's answers, but also ran into both problems (having to click the dropdown twice, and that Firefox throws 'event is not defined').
I did find a solution that seems to solve the two problems and haven't run into other issue yet. This is based on #irvin-dominin-aka-edward's answers by modifying the select2Focus function so that instead of executing the rest of the code right away, wrap it in setTimeout.
Demo in jsFiddle & Stack Snippets
$('.select2').select2({})
.one('select2-focus', OpenSelect2)
.on("select2-blur", function (e) {
$(this).one('select2-focus', OpenSelect2)
})
function OpenSelect2() {
var $select2 = $(this).data('select2');
setTimeout(function() {
if (!$select2.opened()) { $select2.open(); }
}, 0);
}
body {
margin: 2em;
}
.form-control {
width: 200px;
margin-bottom: 1em;
padding: 5px;
display: flex;
flex-direction: column;
}
select {
border: 1px solid #aaa;
border-radius: 4px;
height: 28px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.js"></script>
<div class="form-control">
<label for="foods1" >Normal</label>
<select id="foods1" >
<option value=""></option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Donut</option>
</select>
</div>
<div class="form-control">
<label for="foods2" >Select2</label>
<select id="foods2" class="select2" >
<option value=""></option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Donut</option>
</select>
</div>
Something easy that would work on all select2 instances on the page.
$(document).on('focus', '.select2', function() {
$(this).siblings('select').select2('open');
});
UPDATE: The above code doesn't seem to work properly on IE11/Select2 4.0.3
PS: also added filter to select only single select fields. Select with multiple attribute doesn't need it and would probably break if applied.
var select2_open;
// open select2 dropdown on focus
$(document).on('focus', '.select2-selection--single', function(e) {
select2_open = $(this).parent().parent().siblings('select');
select2_open.select2('open');
});
// fix for ie11
if (/rv:11.0/i.test(navigator.userAgent)) {
$(document).on('blur', '.select2-search__field', function (e) {
select2_open.select2('close');
});
}
Probably after the selection is made a select2-focus event is triggered.
The only way I found is a combination of select2-focus and select2-blur event and the jQuery one event handler.
So the first time the element get the focus, the select2 is opened for one time (because of one), when the element is blurred the one event handler is attached again and so on.
Code:
$('#test').select2({
data: [{
id: 0,
text: "enhancement"
}, {
id: 1,
text: "bug"
}, {
id: 2,
text: "duplicate"
}, {
id: 3,
text: "invalid"
}, {
id: 4,
text: "wontfix"
}],
width: "300px"
}).one('select2-focus', select2Focus).on("select2-blur", function () {
$(this).one('select2-focus', select2Focus)
})
function select2Focus() {
$(this).select2('open');
}
Demo: http://jsfiddle.net/IrvinDominin/fnjNb/
UPDATE
To let the mouse click work you must check the event that fires the handler, it must fire the open method only if the event is focus
Code:
function select2Focus() {
if (/^focus/.test(event.type)) {
$(this).select2('open');
}
}
Demo: http://jsfiddle.net/IrvinDominin/fnjNb/4/
UPDATE FOR SELECT2 V 4.0
select2 v 4.0 has changed its API's and dropped the custom events (see https://github.com/select2/select2/issues/1908). So it's necessary change the way to detect the focus on it.
Code:
$('.js-select').select2({
placeholder: "Select",
width: "100%"
})
$('.js-select').next('.select2').find('.select2-selection').one('focus', select2Focus).on('blur', function () {
$(this).one('focus', select2Focus)
})
function select2Focus() {
$(this).closest('.select2').prev('select').select2('open');
}
Demo: http://jsfiddle.net/IrvinDominin/xfmgte70/
a bit late... but to share my code using select2 4.0.0
$("#my_id").select2();
$("#my_id").next(".select2").find(".select2-selection").focus(function() {
$("#my_id").select2("open");
});
Here is an alternate solution for version 4.x of Select2. You can use listeners to catch the focus event and then open the select.
$('#test').select2({
// Initialisation here
}).data('select2').listeners['*'].push(function(name, target) {
if(name == 'focus') {
$(this.$element).select2("open");
}
});
Find the working example here based the exampel created by #tonywchen
KyleMit's answer worked for me (thank you!), but I noticed that with select2 elements that allow for searching, trying to tab to the next element wouldn't work (tab order was effectively lost), so I added code to set focus back to the main select2 element when the dropdown is closing:
$(document).on('focus', '.select2', function (e) {
if (e.originalEvent) {
var s2element = $(this).siblings('select');
s2element.select2('open');
// Set focus back to select2 element on closing.
s2element.on('select2:closing', function (e) {
s2element.select2('focus');
});
}
});
The problem is, that the internal focus event is not transformed to jQuery event, so I've modified the plugin and added the focus event to the EventRelay on line 2063 of Select2 4.0.3:
EventRelay.prototype.bind = function (decorated, container, $container) {
var self = this;
var relayEvents = [
'open', 'opening',
'close', 'closing',
'select', 'selecting',
'unselect', 'unselecting',
'focus'
]};
Then it is enough to open the select2 when the focus occurs:
$('#select2').on('select2:focus', function(evt){
$(this).select2('open');
});
Works well on Chrome 54, IE 11, FF 49, Opera 40
I tried a number of these and finally came up with the following that works for me with Select2 4.0.1. element is the <select> element.
$.data(element).select2.on("focus", function (e) {
$(element).select2("open");
});
For me using Select2.full.js Version 4.0.3 none of the above solutions was working the way it should be.
So I wrote a combination of the solutions above.
First of all I modified Select2.full.js to transfer the internal focus and blur events to jquery events as "Thomas Molnar" did in his answer.
EventRelay.prototype.bind = function (decorated, container, $container) {
var self = this;
var relayEvents = [
'open', 'opening',
'close', 'closing',
'select', 'selecting',
'unselect', 'unselecting',
'focus', 'blur'
];
And then I added the following code to handle focus and blur and focussing the next element
$("#myId").select2( ... ).one("select2:focus", select2Focus).on("select2:blur", function ()
{
var select2 = $(this).data('select2');
if (select2.isOpen() == false)
{
$(this).one("select2:focus", select2Focus);
}
}).on("select2:close", function ()
{
setTimeout(function ()
{
// Find the next element and set focus on it.
$(":focus").closest("tr").next("tr").find("select:visible,input:visible").focus();
}, 0);
});
function select2Focus()
{
var select2 = $(this).data('select2');
setTimeout(function() {
if (!select2.isOpen()) {
select2.open();
}
}, 0);
}
I've had the problem which was two pronged:
1. In a form with multiple select2 elements, the dropdown won't open on tab, and you need to press space key to open it
2. Once you have made a selection, the tabindex won't be honored and you have to manually click on the next input field
While the usual suggestions worked, I came up with my own version, since a library script was doing the conversion of normal select to select2, and hence I had no control over this initialization.
Here is the code that worked for me.
Tab to open
$(document).on("focus", ".select2", function() {
$(this).siblings("select").select2("open");
});
Move to next on selection
var inputs = $("input,select"); // You can use other elements such as textarea, button etc.
//depending on input field types you have used
$("select").on("select2:close",function(){
var pos = $(inputs).index(this) + 1;
var next = $(inputs).eq(pos);
setTimeout( function() {
next.focus();
if (next.siblings(".select2").length) { //If it's a select
next.select2("open");
}
}, 500); //The delay is required to allow default events to occur
});
Hope this helps.
an important thing is to keep the multiselect open all the time. The simplest way is to fire open event on 'conditions' in your code:
<select data-placeholder="Choose a Country..." multiple class="select2-select" id="myList">
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
javascript:
$(".select2-select").select2({closeOnSelect:false});
$("#myList").select2("open");
fiddle: http://jsfiddle.net/xpvt214o/153442/
This worked for me using Select2 v4.0.3
//Initialize Select2
jQuery('.js-select').select2();
// Make Select2 respect tab focus
function select2Focus(){
jQuery(window).keyup(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9 && jQuery('.select2-search__field:focus').length) {
jQuery('.js-select').select2('open');
}
});
}
select2Focus();
Fork of Irvin Dominin's demo: http://jsfiddle.net/163cwdrw/
I tried these solutions with the select2 version 3.4.8 and found that when you do blur, the select2 triggers first select2-close then select2-focus and then select2-blur, so at the end we end up reopening forever the select2.
Then, my solution is this one:
$('#elemId').on('select2-focus', function(){
var select2 = $(this).data('select2');
if( $(this).data('select2-closed') ){
$(this).data('select2-closed', false)
return
}
if (!select2.opened()) {
select2.open()
}
}).on('select2-close', function(){
$(this).data('select2-closed', true)
})
Somehow select2Focus didn't work here with empty selection, couldn't figured out the issue, therefore I added manual control when after focus event auto open get's triggered.
Here is coffeescript:
$("#myid").select2()
.on 'select2-blur', ->
$(this).data('select2-auto-open', 'true')
.on 'select2-focus', ->
$(this).data('select2').open() if $(this).data('select2-auto-open') != 'false'
.on 'select2-selecting', ->
$(this).data('select2-auto-open', 'false')
I've tried a pretty ugly solution but it fixed my problem.
var tabPressed = false;
$(document).keydown(function (e) {
// Listening tab button.
if (e.which == 9) {
tabPressed = true;
}
});
$(document).on('focus', '.select2', function() {
if (tabPressed) {
tabPressed = false;
$(this).siblings('select').select2('open');
}
});
You can use this :
$(document).on('select2:open', () => {
document.querySelector('.select2-search__field').focus();
});