jQuery autocomplete select event and blur event on input field relation

Question

I have a question about the jQuery UI Autocomplete component. I initialize the component in the following way:

var $input = $('#autocompleteInput');
$input.autocomplete({
    source: source,
    appendTo: appendToSelector,
    select: function(event, ui) {
       console.log('select');
    },
    minLength: 0
});

//...

$input.on('blur', function(e) {
  console.log('blur');
});

When I try this code in the browser and select an item from the autocomplete dropdown list, I always see selected printed before blur in the Chrome console:

selected

blur

Can I be sure that these two listeners are always executed in this order (selected first and blur after) when I select an item from the autocomplete? How can I be sure that the order of execution will be always this?

Thanks for the attention.

Answer 1

To answer your question in short, no. There are a number of scenarios that can result in many different combinations.

Here is some testing:

https://jsfiddle.net/Twisty/b4nyguqd/

HTML

<div>
  <label>Search:</label>
  <input id="autocompleteInput" type="text" />
</div>
<div class="wrapper">
  <div id="eventLog">
  </div>
</div>

jQuery

function upEvent(log) {
  var d = new Date();
  var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
  $("#eventLog").append("<p>" + time + " - " + log + "</p>\r\n");
}
$(function() {
  var source = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  var $input = $('#autocompleteInput');
  var appendToSelector = "#someElem";
  $input.autocomplete({
    source: source,
    select: function(event, ui) {
      upEvent(event.type);
    },
    minLength: 0
  });

  $input.on('blur', function(e) {
    upEvent(e.type);
  });
});

As a user, I can only do a few things, but for example here are the first few I tested:

1. Type 'app', result shown: 'AppleScript'
2. Arrow down until 'AppleScript' is highlighted
3. Press Return key
4. Delete until only 'A' remains
5. Arrow down to 'ActionScript'
6. Press Return
7. Click the mouse on the page outside of text field

The results:

10:35:18 - autocompleteselect
10:35:24 - autocompleteselect
10:35:26 - blur

As you can see, I've performed normal operations, but blur was never triggered since I never lost focus of the test field.

Update

---

After your comment, you can see:

https://jsfiddle.net/Twisty/b4nyguqd/2/

My results:

13:54:2 - Temp value updated: AppleScript
13:54:2 - autocompleteselect
13:54:6 - Temp Value during blur: AppleScript
13:54:6 - blur
13:54:14 - Temp value updated: Asp
13:54:14 - autocompleteselect
13:54:20 - Temp Value during blur: Asp
13:54:20 - blur

Another Test lacking select and also selecting different values without blur events:

13:56:16 - Temp Value during blur: undefined
13:56:16 - blur
13:56:22 - Temp value updated: C++
13:56:22 - autocompleteselect
13:56:23 - Temp Value during blur: C++
13:56:23 - blur
13:56:28 - Temp value updated: C
13:56:28 - autocompleteselect
13:56:32 - Temp value updated: C++
13:56:32 - autocompleteselect
13:56:34 - Temp Value during blur: C++
13:56:34 - blur