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?

Epicureanism

Can you post your code? This is not the default functionality of .autocomplete() from my experience. You should not be losing focus when using the arrow keys. – Bradfield

You misunderstood me. The arrow keys are working fine. It's when I start typing, and then use the mouse and click to select my choice that it blurs. – Epicureanism

Oh sorry, I misread that. What behavior does the blur event cause that you'd like to prevent? Just trying to understand exactly the behavior you want. – Bradfield

I'm designing a little quizz. The blur event changes the background of the input button to either green or red, depending on whether the user answer is correct or wrong, respectively. The correction fires immediately when the input is blurred. – Epicureanism

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');
  }
});

Maidy

This is exactly the solution that I came up with, beat me to it dnzone88! But yeah, this is the best way to get the behavior you want Randomblue. – Bradfield

Answer 2

what do you have in your blur event? It's kind of hacky but you could do a setTimeout with a relatively short delay for your blur's handler. Then you can set a variable in the autocomplete's focus event handler and tell your blur handler to not fire.

Jurgen

That sounds hacky and subobtimal. My blur event should be fired instantaneously! – Epicureanism

Answer 3

While drzone88's answer above works great, there is one edge case that I stumbled on which should be brought up: when you search and have no results displayed, the close event is never called. Then your blur function will also never be called. So I settled with setting the flag when response content is empty.

My solution also uses jquery.data() so we don't have to drag a variable around:

$( ".selector" ).autocomplete({
  source: ["your values here"],
  open: function(event, ui) { $(this).data("no-blur", true); },
  close: function(event, ui) {
    $(this).data("no-blur", false);
  },
  response: function(event, ui){
    if(ui.content.length == 0) //when search results are empty, close is not called
      $(this).data("no-blur", false);
    else
      $(this).data("no-blur", true); //not sure open is called again either if we re-get results
  }
}).on("blur", function() {
  if(!$(this).data("no-blur")) {
    //do something
  }
});

As it turns out, though, because of the order in which events are called and what I actually needed to do (fire something on blur when user blurs the field without selecting an option in the suggestion list), I ended up setting my noblur flag to true at the start of the select function, and back to false at the end of the blur, like so:

$( ".selector" ).autocomplete({
  source: ["your values here"],
  select: function(ui, event){
    $(this).data("no-blur", true);
    //do select stuff
  },

}).on("blur", function() {
  if(!$(this).data("no-blur")) {
    //do something
  }
  $(this).data("no-blur", false);
});

Hope this can help someone!

Kimmi