Prevent default tab with jqueryui catcomplete

[grant.baker]

Hi, I'm having trouble figuring out how to prevent the default tab action when using jquery ui catcomplete. It works perfectly until I add the catcomplete widget code. I'm using the catcomplete widget code found on jquery ui.com:

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

and again I'm using the code on the jquery ui website to prevent the default tab action:

.bind( "keydown", function( event ) {
    if ( event.keyCode === $.ui.keyCode.TAB &&
        $( this ).data( "ui-autocomplete" ).menu.active ) {
      event.preventDefault();
    }
  })

However, I get the following error: cannot read property 'menu' of undefined. Any thoughts on why the menu property isn't being defined?

However, I get the following error: cannot read property 'menu' of undefined. Any thoughts on why the menu property isn't being defined?

Take a look at this workaround. You have the similair code but in the link has a explantion how to work around it:

http://bugs.jqueryui.com/ticket/9029

[grant.baker]

Oh, thank you so much! I had searched high and low for an answer and tried everything I could think of. This finally worked!