I'm making an intranet application and experimenting with the Jeditable plugin for jQuery. The following function makes an element (in this case a td element) clickable, which then turns it editable (again in this case selectable, as it's a select box) and checks a key listener to see if tab or shift-tab has been pressed to activate the next or previous editable area.

$('.editBool').editable(function(value, settings){ // show and hide clickable links. shouldn't be important to problem, // but i don't know at this point $(this).parent().find('a.editbutton').hide(); $(this).parent().find('a.savebutton').show(); $(this).parent().addClass('notSaved'); // sets a warning if they leave the page without saving edited data window.onbeforeunload = savePage; // needed for editable to work (apparently). return(value); }, { data : "{'Yes':'Yes','No':'No'}", type : 'select', onblur : 'submit', callback : function(value, settings) { // kp is the keypress, sp is a bool checking for the shift key if (kp == 9){if (sp){$(this).prev().click();}else{$(this).next().click();}kp = null;} } });

If I tab through the Jeditable boxes with code like this, I have no problems, until I move the mouse in Internet Explorer (7 and 8). If the currently selected element is a select box (using the code above), when the mouse moves, the select box loses focus and triggers the onblur event. If the mouse doesn't move, focus stays with the select box.

If I use the cursors to try to select another value, focus is lost as well, and again the onblur event is triggered.

This does not happen with any other kind of element I've set as Jeditable (textarea, autogrow textarea, masked text), just on selects, and only in IE 7-8 (maybe 6 as well, but I don't care about 6 anymore). It works as I expect it to work in FF3, Chrome 4+, Opera 10 (focus stays on select box when mouse moves and options can be selected by keyboard arrow commands).

Does anyone have any ideas about why this might be happening?

Thanks.

Clarification time: This bug only happens when using a next() function to go from a jeditable enabled td set to change to text, textedit or autogrow on click, to a jeditable enabled td set to a select box. It doesn't happen when going from text to text, or select to text.

More detail time: The bug is happening when the focus() is called in the jeditable jQuery plugin, line 253:

$(':input:visible:enabled:first', form).focus();

It seems if the mouse is moved after this line, it causes the select box to lose focus. This is driving me nuts, and as I want to solve this one, I've been attacking it every which way I can. I came across a curious oddity by swapping the previous line for this one:

setTimeout(function() { $(':input:visible:enabled:first', form).focus();}, 1000);

During the second between the select box being created and the focus set, if the mouse moves, focus is not lost once set. If the mouse does not move before focus is set, when it does move, focus is lost. This appears to be total fruit and nuttiness. I've been googleing the hell out of this issue, and can't find a solution. Any help would be very much appreciated.

Thanks,