JQuery UI Autocomplete with categories and scrollbar

Question

I'm having trouble using autocomplete with categories and then adding a vertical scrollbar. When the list is shorter than the max-height the scrollbar does not show just like expected. But when the last item in the list is selected the scrollbar appears.

JSFiddle example (taken right off the demo page, type "a" in the input)

Any clues on how to solve this?

$.widget( "custom.catcomplete", $.ui.autocomplete, {
  _create: function() {
    this._super();
    this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
  },
  _renderMenu: function( ul, items ) {
    var that = this,
      currentCategory = "";
    $.each( items, function( index, item ) {
      var li;
      if ( item.category != currentCategory ) {
        ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
        currentCategory = item.category;
      }
      li = that._renderItemData( ul, item );
      if ( item.category ) {
        li.attr( "aria-label", item.category + " : " + item.label );
      }
    });
  }
});

var data = [
  { label: "anders", category: "" },
  { label: "andreas", category: "" },
  { label: "antal", category: "" },
  { label: "annhhx10", category: "Products" },
  { label: "annk K12", category: "Products" },
  { label: "annttop C13", category: "Products" },
  { label: "anders andersson", category: "People" },
  { label: "andreas andersson", category: "People" },
  { label: "andreas johnson", category: "People" }
];

$( "#search" ).catcomplete({
  delay: 0,
  source: data
});

Answer 1

Solved it myself. A little padding on the ul-element did the trick.