#4403 closed bug (fixed)

Opened March 26, 2009 12:03PM UTC

Closed January 20, 2012 08:50PM UTC

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

Reported by:	rockwild	Owned by:
Priority:	major	Milestone:	1.9.0
Component:	ui.tabs	Version:	1.7.1
Keywords:	tabs	Cc:
Blocked by:		Blocking:

Description

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.

Attachments (0)

Change History (12)

Changed May 07, 2009 11:14AM UTC by jzaefferer comment:1

milestone:	TBD → 1.7.2

Changed May 07, 2009 01:39PM UTC by jzaefferer comment:2

milestone:	1.7.2 → 1.8

Changed May 08, 2009 11:35AM UTC by rockwild comment:3

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

Changed May 18, 2009 08:02PM UTC by Olson.dev comment:4

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);

Changed November 23, 2009 06:48PM UTC by irrational comment:5

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?

Changed November 23, 2009 06:57PM UTC by irrational comment:6

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.

Changed February 02, 2010 04:25PM UTC by milan comment:7

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

Changed March 05, 2010 11:12PM UTC by KhoaTon comment:8

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());

Changed March 28, 2011 06:48PM UTC by gnarf comment:9

status:	new → open

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

Changed March 28, 2011 06:49PM UTC by gnarf comment:10

summary:	Issue with tab deletion → Removing a tab can result in a selected index of -1 if fx option is used

Changed May 05, 2011 03:13AM UTC by hyperlink comment:11

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

Changed January 20, 2012 08:50PM UTC by scottgonzalez comment:12

resolution:	→ fixed
status:	open → closed

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.

Search and Top Navigation