How to disable keyboard navigation in jQuery UI tabs

This is a quick tip to disable the keyboard navigation introduced in the latest jQuery UI releases (which at the time of this writing is not configurable), but before to show the snippet I have to say that while jQuery is an helpful and powerful JavaScript library, jQuery UI is really sucky and that the team behind it should take it more seriously… I mean, it’s just ridiculous compared to other js UI libraries and further more them don’t care about retro-compatibility (I had problems on every update in the past!).
Ok, this is how I removed the keyboard navigation (it’s really a dirty way but better than what I found online and it’s working!):

    activate: function(e, ui) {

In practice in the “activate” callback I remove the focus from the tab and thus the listeners related to the keyboard are not being executed later.

  • Thanks for publishing, Dave.

    Do you know where a “TypeError: e.currentTarget is undefined” error might be coming from?

  • It seems “currentTarget” is not defined in the event object “e” (if you have copied my snippet)… why? I don’t know :P

  • hehe, okay. I’ll try to figure that out. Thanks for responding, David.

  • Luke Jacobs

    This broke some custom onclick events I had for “fake” tabs that activated tab pages. I wonder if it would break certain other custom methods. I may have to target key binds more specifically, as seen in some other solutions.

    onclick=”$(function(){$(‘.jqui-submenu’).tabs(‘option’,’active’,2); $(‘html,body’).scrollTop(0);});”