jquery - Select2 v4 unable to tab into, press enter, and then select, with Firefox (aka mouseless access) -

i unable tab select2 enabled <select> element in firefox (38.0.5) - in other words, cannot access select <option> in mouseless manner. in chrome, can tab through form , press enter in order start selecting item in select2 select element. have not tested in other browsers, before submitting actual bug report want verify whether others experiencing same issue?

you can duplicate on demo page.

• select2 v4.0.0
• twitter bootstrap 3.3.4 (although have not added additional items style bootstrap)
• firefox v38.0.5

while not perfect solution, following using simulate normal keyboard navigation on html form contains select2 element.

/**  * warning: untested using select2's option ['selectonclose'=>true]  *  * code written because select2 widget not handle  * tabbing 1 form field another.  desired behavior  * user can use [enter] select value select2 , [tab] move  * next field on form.  *  * following code moves focus next form field when select2 'close'  * event triggered.  if next form field select2 widget, widget  * opened automatically.  *  * users click elsewhere on document cause active select2  * widget close.  prevent code overriding user's focus choice  * flag added each element users clicks on.  if flag  * active, automatic focus script not happen.  *  * prevent conflicts multiple select2 widgets opening @ once, second  * flag used indicate open status of select2 widget.   * necessary use flag instead of reading class '--open' because using  * class '--open' indicator flag caused timing/bubbling issues.  *  * simulate shift+tab event, flag recorded every time shift key  * pressed.  */ jquery(document).ready(function($) {     var docbody = $(document.body);     var shiftpressed = false;     var clickedoutside = false;     //var keypressed = 0;      docbody.on('keydown', function(e) {         var keycaptured = (e.keycode ? e.keycode : e.which);         //shiftpressed = keycaptured == 16 ? true : false;         if (keycaptured == 16) { shiftpressed = true; }     });     docbody.on('keyup', function(e) {         var keycaptured = (e.keycode ? e.keycode : e.which);         //shiftpressed = keycaptured == 16 ? true : false;         if (keycaptured == 16) { shiftpressed = false; }     });      docbody.on('mousedown', function(e){         // remove other focused references         clickedoutside = false;         // record focus         if ($(e.target).is('[class*="select2"]')!=true) {             clickedoutside = true;         }     });      docbody.on('select2:opening', function(e) {         // element has focus, remove other flags         clickedoutside = false;         // flag select2 open         $(e.target).attr('data-s2open', 1);     });     docbody.on('select2:closing', function(e) {         // remove flag select2 closed         $(e.target).removeattr('data-s2open');     });      docbody.on('select2:close', function(e) {         var elselect = $(e.target);         elselect.removeattr('data-s2open');         var currentform = elselect.closest('form');         var othersopen = currentform.has('[data-s2open]').length;         if (othersopen == 0 && clickedoutside==false) {             /* find inputs on current form not focus`able:              *  - includes hidden <select> elements parents visible (select2)              *  - excludes hidden <input>, hidden <button>, , hidden <textarea> elements              *  - excludes disabled inputs              *  - excludes read-only inputs              */             var inputs = currentform.find(':input:enabled:not([readonly], input:hidden, button:hidden, textarea:hidden)')                 .not(function () {   // not include inputs hidden parents                     return $(this).parent().is(':hidden');                 });             var elfocus = null;             $.each(inputs, function (index) {                 var elinput = $(this);                 if (elinput.attr('id') == elselect.attr('id')) {                     if ( shiftpressed) { // shift+tab                         elfocus = inputs.eq(index - 1);                     } else {                         elfocus = inputs.eq(index + 1);                     }                     return false;                 }             });             if (elfocus !== null) {                 // automatically move focus next field on form                 var isselect2 = elfocus.siblings('.select2').length > 0;                 if (isselect2) {                     elfocus.select2('open');                 } else {                     elfocus.focus();                 }             }         }     });      /**      * capture event user entered select2 control using keyboard.      * http://stackoverflow.com/questions/20989458      * http://stackoverflow.com/questions/1318076      */     docbody.on('focus', '.select2', function(e) {         var elselect = $(this).siblings('select');         var test1 = elselect.is('[disabled]');         var test2 = elselect.is('[data-s2open]');         var test3 = $(this).has('.select2-selection--single').length;         if (elselect.is('[disabled]')==false && elselect.is('[data-s2open]')==false             && $(this).has('.select2-selection--single').length>0) {             elselect.attr('data-s2open', 1);             elselect.select2('open');         }     });  });