title: jQuery Autocomplete: CSS ui-focus-state class not added to focused item when using key arrows
body: <p>Normally, when using jQuery Autocomplete, one can browse through the shown list items with keys. If the item currently chosen with arrow keys is to be styled with CSS, I do this:</p>
  
  <pre><code>.ui-state-focus {
     background-color: blue;
  }
  </code></pre>
  
  <p>This worked for me every time.</p>
  
  <p>Currently, in jQuery UI - v1.12.0, the <code>ui-state-focus</code> class is not added to the list element when it's selected with arrow keys.</p>
  
  <p>I render the items in a <strong>custom</strong> way, like this:</p>
  
  <pre><code>return $('&lt;li&gt;')
      .attr('data-id', item.id)
      .attr('tabindex', '-1')
      .append(appendItem) /* Text content of the item */
      .appendTo(ul);
  </code></pre>
  
  <p>I understand this probably has nothing to do with the jQuery UI version I'm using. But I don't get why the <code>ui-state-focus</code> is not added to my items, so I can style the focus state.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Also, when I use the <code>autoFocus: true</code> property in the Autocomplete config - it doesn't work at all. It should focus on the first list element shown, but it does nothing. Changing other properties (like <code>delay</code>) works fine.</p>