Disable navigating with the arrow keys

Question

jQuery UI Tabs has this "feature" where if i press the up/left or down/right key arrows it switches the tabs and loads that tab.

Generally for horizontal tabs, users are more acquainted with having the up and down keys scroll the page vs moving tabs. Is it possible to disable tab navigation for only the up and down keys?

UPDATE

Based on Konstantin's suggestion i tried the following code. It blocks the event when I click the up or down key, right after clicking the anchor tab. If i hit another key though like the left/right keys and then hit the up/down keys again. It registers the event, but doesn't seem to stop propagation. Could the event be firing from another element? Here's my code:

   $('#tabs').keydown(function (event) {
        console.log("in tabs");
        if (event.keyCode == 40 || event.keyCode == 38) {
          event.stopPropagation();
          event.preventDefault();
          return false;
        };
    });
    $('.ui-tabs-anchor').keydown(function (event) {
      console.log("in ui tabs anchor");
        if (event.keyCode == 40 || event.keyCode == 38) {
          event.stopPropagation();
          event.preventDefault();
          return false;
        };
    });

    $('.ui-tabs-nav').keydown(function (event) {
      console.log("in ui tabs nav");
        if (event.keyCode == 40 || event.keyCode == 38) {
          event.stopPropagation();
          event.preventDefault();
          return false;
        };
    });

Answer 1

Yes you can handle the keydown event and prevent it. It's attached to the ui-tabs anchor:

$('.ui-tabs-anchor').keydown(function (event) {
    return false;
});

Answer 2

Search for the following code in your jQuery-UI file and comment out case $.ui.keyCode.DOWN: and case $.ui.keyCode.UP:

Pretty much you will be removing the unwanted functionality at its source.

_tabKeydown: function( event ) {
        var focusedTab = $( this.document[0].activeElement ).closest( "li" ),
            selectedIndex = this.tabs.index( focusedTab ),
            goingForward = true;

        if ( this._handlePageNav( event ) ) {
            return;
        }

        switch ( event.keyCode ) {
            case $.ui.keyCode.RIGHT:
//IMPORTANT BIT case $.ui.keyCode.DOWN: 
                selectedIndex++;
                break;
//IMPORTANT BIT case $.ui.keyCode.UP:
            case $.ui.keyCode.LEFT:
                goingForward = false;
                selectedIndex--;
                break;
            case $.ui.keyCode.END:
                selectedIndex = this.anchors.length - 1;
                break;
            case $.ui.keyCode.HOME:
                selectedIndex = 0;
                break;
            case $.ui.keyCode.SPACE:
                // Activate only, no collapsing
                event.preventDefault();
                clearTimeout( this.activating );
                this._activate( selectedIndex );
                return;
            case $.ui.keyCode.ENTER:
                // Toggle (cancel delayed activation, allow collapsing)
                event.preventDefault();
                clearTimeout( this.activating );
                // Determine if we should collapse or activate
                this._activate( selectedIndex === this.options.active ? false : selectedIndex );
                return;
            default:
                return;
        }

Answer 3

Just had to do this myself. This is what worked for me:

$.widget("ui.tabs", $.ui.tabs, {
    _tabKeydown: function (event) {
        if (event.keyCode !== 38 && event.keyCode !== 40) {
            this._super(event);
        }
    }
});