jQuery autocomplete mouse choice fires the blur event

Question

I use the jQuery UI .autocomplete(), which I really love. I do have one major problem I cannot solve.

When I type a letter, say s, and stackoverflow appears in the drop-down menu, and I use the mouse to select stackoverflow, then the input box temporarily loses focus, which causes the onblur event to be called.

Although technically the input box is blured when I click, this goes against usability intuition. How can I fix this annoying behavior?

Answer 1

you can try using the jQuery UI autocomplete's open and close event to control your textbox's blur event. When the autocomplete is open you disable the blur event and when it close you enable your blur event again. I have setup a working example at jsfiddle.net. Hope it helps.

var disable=false;

$( "#tags" ).autocomplete({
  source: availableTags,
  open: function(event, ui) { disable=true },
  close: function(event, ui) {
    disable=false; $(this).focus();
  }
}).blur(function() {
  if(!disable) {
    alert('blur');
  }
});