title: JQuery UI Autocomplete focus() being called unexpectedly in Internet Explorer
body: <p>I've created a simple auto-complete control using JQuery UI. I have a default value for the input field that reads "Enter your keywords...". I've set up a <em>focus()</em> event that will clear the input when a user sets the focus to the input field to being typing.</p>
  
  <p>In IE when you being typing and the menu displays a list of items, when picking an item from the menu item <em>focus()</em> is called again. This extra call to <em>focus()</em> only happens in IE. The side effect is that the selected menu item is cleared from the text field.</p>
  
  <p>I have a very primitive solution to this by making use of the <code>autocomplete.focus()</code> event. This event is fired when the user hovers over a selected menu item. Here I can set a global boolean variable that can be used to tell the focus() event on the input field that the menu item is active/visible and thus not to clear the input value. This is a hack, of course!</p>
  
  <p>Is there an alternative (less hacky!) solution to this problem?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Autocomplete demo&lt;/title&gt;
      &lt;link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" /&gt;
      &lt;script type="text/javascript" src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script&gt;
      $(function () {
          var availableTags = [
              "ActionScript",
              "AppleScript",
              "Asp",
              "BASIC",
              "C",
              "C++",
              "Clojure",
              "COBOL",
              "ColdFusion",
              "Erlang",
              "Fortran",
              "Groovy",
              "Haskell",
              "Java",
              "JavaScript",
              "Lisp",
              "Perl",
              "PHP",
              "Python",
              "Ruby",
              "Scala",
              "Scheme"
          ];
          $("#tags").autocomplete({
              source: availableTags,
              focus: function (event, ui) {
                 // This event fires when an item from the menu is selected (in focus)
                 // set some variable here to tell the focus() call to the text field not to clear the value from the input field
              },
          });
  
          $("#tags").focus(function () {
              // clear the input value
              $("#tags").val("");
          });
      });
  &lt;/script&gt;
  
  &lt;div class="demo"&gt;
  
      &lt;div class="ui-widget"&gt;
          &lt;label for="tags"&gt;Tags: &lt;/label&gt;
          &lt;input id="tags" value="Enter your keywords..." /&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>UPDATE</h1>
  
  <p>With the slight tweak to this solution and with help from the provided answer this now works in IE 8 &amp; 9.</p>
  
  <pre><code>$(document).ready(function () {
      var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
      ];
      $("#tags").autocomplete({
          source: availableTags
      });
  
      $("#tags").focus(function () {
          // clear the input value
          $("#tags").val("");
  
        return false;
      });
  })
  </code></pre>