Opened 10 years ago

Closed 7 years ago

#4403 closed bug (fixed)

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.

Change History (12)

comment:1 Changed 10 years ago by Jörn Zaefferer

Milestone: TBD1.7.2

comment:2 Changed 10 years ago by Jörn Zaefferer

Milestone: 1.7.21.8

comment:3 Changed 10 years ago by 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

comment:4 Changed 10 years ago by 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);

comment:5 Changed 9 years ago by 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?

comment:6 Changed 9 years ago by 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.

comment:7 Changed 9 years ago by 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

comment:8 Changed 9 years ago by 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());

comment:9 Changed 8 years ago by Corey Frang

Status: newopen

comment:10 Changed 8 years ago by Corey Frang

Summary: Issue with tab deletionRemoving a tab can result in a selected index of -1 if fx option is used

comment:11 Changed 8 years ago by hyperlink

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

comment:12 Changed 7 years ago by Scott González

Resolution: fixed
Status: openclosed

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.

Note: See TracTickets for help on using tickets.