Removing a tab can result in a selected index of -1 if fx option is used

[rockwild]

It appears that occasionally when a tab is deleted using $("#example").tabs("remove", index) the selected.tabs property in data is set to -1. This makes any operations done after the deletion that require the selected tab's index not work when using the recommended way of getting the currently selected tab index: $("#tab_element").data("selected.tabs"); or $("#tab_element").tabs('option', 'selected');. I tried setting the selected.tabs value in the "show" callback function, but that didn't seem to change anything. Here is the function I am using to delete tabs:

function deleteTab(){
   var tabEl = $j(".ui-tabs-selected");
   var tabsEl = $j("#tabs");
   if(confirm('Are you sure you want to delete the "' +  tabEl.find
("span").html() + '" tab?')){
      tabsEl.tabs("remove", tabsEl.data("selected.tabs"));
   }
}

I have set up a rough demo at ​http://games4moola.com/portalpage.cfm. Just use the delete link to delete the first tab and then try to delete the second tab. You can also try clicking the second tab then going back to the first and deleting them (which works for me) and if you get them both deleted, hit the "+" tab to add two more and try to delete those and the same issue will happen.

[rockwild]

I changed my setup on the server. If you still want to access the page you need to use this link: ​http://games4moola.com/portalpage.cfm?itsme=true

[Olson.dev]

I'm experiencing this as well. Another undesired side-effect I've noticed with tab removal is you cannot do something like this:

// Assume tab 4 is selected when this code is executed
$('#MyTabs').tabs('select',1);
$('#MyTabs').tabs('remove',4);

You would assume your Tabs control would select tab 1 and remove tab 4 and stay on tab 1 but it does not. Because you /were/ on tab 4 and you programmatically select tab 1, the ui-tabs-selected class hasn't yet been removed from tab 4's li element. The offending code in ui.tabs.js is as follows:

494  if ($li.hasClass('ui-tabs-selected') && this.anchors.length > 1) {
495    this.select(index + (index + 1 < this.anchors.length ? 1 : -1));
496  }

This is my current workaround:

$('#MyTabs ul li').removeClass('ui-tabs-selected');
$('#MyTabs').tabs('select',0);
$('#MyTabs').tabs('remove',TabIndex);

[irrational]

Just to chime in. I'm experiencing this exact same issue. It seems like it should be a relatively easy fix so I'm surprised that this bug has been open for 8 months. Surely this is something anyone who tries to remove a tab will run into?

[irrational]

var selected = $('#tabs').tabs('option', 'selected'); selected = 4 $('#tabs').tabs('remove', selected); removes the 4th tab var newSelected = selected - 1; newSelected = 3 $("#tabs").tabs({selected: newSelected}); Does not select the third tab? var newSelectedTab = $('#tabs').tabs('option', 'selected'); newSelectedTab = -1

A used clicks the delete button again and nothing happens since there is no tab with the index of -1.

[milan]

I've also seen this bug:

1) A user removes a tab i.e.

var selected = $('#tabs').tabs('option', 'selected'); //selected = 4 
$('#tabs').tabs('remove', selected); //removes the 4th tab

2) A new tab is selected in the UI, normally the next tab unless the last tab was deleted. Then the previous tab is selected (all is well)

3) The user deleted the tab that is selected in the UI.

Again:

var selected = $('#tabs').tabs('option', 'selected'); // this time selected returns -1!
$('#tabs').tabs('remove', selected); // nothing happens as selected is -1

4) If the user tries to delete the tab again (as they would as it hasn't been deleted). Then this happens:

var selected = $('#tabs').tabs('option', 'selected'); // this time selected returns 3 (as it should)
$('#tabs').tabs('remove', selected); // tab gets removed and everything works ok

[KhoaTon]

Seems like this bug occurs only when the tabs are animated.

Since the correct tab is selected, just the selected index is wrong, the following workaround fixes the index:

/*
 * Workaround for tabs select and animation bug
 * http://dev.jqueryui.com/ticket/4403
 */
if ($("#tabs").tabs("option", "selected") == -1) $("#tabs").tabs("option", "select", $(".ui-tabs-selected", "#tabs").index());

[Corey Frang]

JSFiddle Case: ​http://jsfiddle.net/gnarf/enW6k/3

[hyperlink]

not able to reproduce this with latest (1.9pre).

[Scott González]

As hyperlink mentions, this seems to work properly in master. Note that properly in this case means as you would expect from existing behavior of the remove method. This behavior is actually different than the behavior if you use the new API and remove the respective elements then call refresh.