Tab Selected/Deselected behavior difference

[gli]

Hello,

I have a TabSet with several tabs that I open, remove and then open a new one.
In IE and FF, the behavior is different. When I close a tab and then re-open a new one in the same position, the "tabSelected" and "tabDeselected" are called more than once in IE whereas they're called only once in FF.

SmartClient 7.0PowerEdition
Internet Explorer 6/7/8
Firefox 3.5

Here is a test case [Note : My application is more complex, I had to create a here a small example to show the behavior. In this test cast, the end behavior (selection of the new tab) is the same but it causes problem in my application]

isc.setAutoDraw(false);
isc.TabSet.create({
    ID: "appTabSet", tabBarPosition: "top", autoDraw: true, width: "700", height : "100%",
	tabSelected: function (tabNum, tabPane, ID, tab) {
		isc.logWarn ("appTabSelected " + ID);
	},
	tabDeselected: function (tabNum, tabPane, ID, tab) {
		isc.logWarn ("appTabDeselected " + ID);
	},
	selectTab: function (tab) {
		var tb = this.getTab (tab);
		if (tb) {
			isc.logWarn ("selectTabObject " + tb);
		}
		this.Super("selectTab", arguments);
	},
	tabs: [
		{ title: "Dashboard", ID: "dashTab", autoDraw: false, pane: isc.Label.create ({contents : "Dashboard" }) }
	]
});
var tabNumber = 1;
isc.Button.create ({
	left: "710", title: "Add", autoDraw: true,
	click: function () {
		appTabSet.addTab ({
			title: "Tab" + tabNumber,
		    ID: "tab" + tabNumber,
			pane: isc.Label.create ({contents : "Tab" + tabNumber })
			});
		appTabSet.selectTab ("tab" + tabNumber);
		tabNumber = tabNumber + 1;
	}
});
isc.Button.create ({
	left: "910", width: 300, autoDraw: true, title: "Remove then Add",
	click: function () {
		appTabSet.closeClick ("tab" + (tabNumber - 1));
		appTabSet.addTab ({
			title: "Tab" + tabNumber,
		    ID: "tab" + tabNumber,
			pane: isc.Label.create ({contents : "Tab" + tabNumber })
			});
		appTabSet.selectTab ("tab" + tabNumber);
		tabNumber = tabNumber + 1;
	}
});

To reproduce the behavior
1/ Click on the "Add" button => a new tab is added
2/ Click on the "Remove then Add" button => the old tab is removed, a new one created and selected.

In Firefox, when I examine the console, after the second action (so when the new tab is selected), the "appTabDeselected" and "appTabSelected" are called once.
The dashboard tab is deselected and the created tab is selected.

12:09:53.328:MUP3:WARN:Log:selectTabObject [ImgTab ID:tab1]
12:09:53.340:MUP3:WARN:Log:appTabDeselected dashTab
12:09:53.357:MUP3:WARN:Log:appTabSelected tab1

"

In IE, they are called three times :
1/ The dashboard tab is deselected and the created tab is selected.
2/ The created tab is deselected and the dashboard tab is selected.
3/ The dashboard tab is deselected and the created tab is selected.

12:09:25.734:MUP0:WARN:Log:selectTabObject [ImgTab ID:tab1]
12:09:25.750:MUP0:WARN:Log:appTabDeselected dashTab
12:09:25.765:MUP0:WARN:Log:appTabSelected tab1
12:09:25.796:FCS3:WARN:Log:appTabDeselected tab1
12:09:25.812:FCS3:WARN:Log:appTabSelected dashTab
12:09:25.828:FCS5:WARN:Log:appTabDeselected dashTab
12:09:25.843:FCS5:WARN:Log:appTabSelected tab1

Note : In my application, the third "double-call" is not done and the user ends up with the "Dashboard" tab selected instead of the one the user newly created and selected.

Complete console output
IE (15 lines, notice the last 4 lines in the console)

12:09:19.562:INFO:Log:initialized
12:09:20.234:WARN:Log:appTabSelected dashTab
12:09:20.265:INFO:Log:isc.Page is loaded
12:09:22.171:MUP3:WARN:Log:selectTabObject [ImgTab ID:tab1]
12:09:22.187:MUP3:WARN:Log:appTabDeselected dashTab
12:09:22.203:MUP3:WARN:Log:appTabSelected tab1
12:09:25.656:MUP0:WARN:Log:selectTabObject [ImgTab ID:dashTab]
12:09:25.671:MUP0:WARN:Log:appTabSelected dashTab
12:09:25.734:MUP0:WARN:Log:selectTabObject [ImgTab ID:tab1]
12:09:25.750:MUP0:WARN:Log:appTabDeselected dashTab
12:09:25.765:MUP0:WARN:Log:appTabSelected tab1
12:09:25.796:FCS3:WARN:Log:appTabDeselected tab1
12:09:25.812:FCS3:WARN:Log:appTabSelected dashTab
12:09:25.828:FCS5:WARN:Log:appTabDeselected dashTab
12:09:25.843:FCS5:WARN:Log:appTabSelected tab1

FF (11 lines, notice that the last 4 lines present in the IE console are not present here)

12:09:39.491:INFO:Log:initialized
12:09:39.974:WARN:Log:appTabSelected dashTab
12:09:40.030:INFO:Log:isc.Page is loaded
12:09:51.536:MUP0:WARN:Log:selectTabObject [ImgTab ID:tab1]
12:09:51.543:MUP0:WARN:Log:appTabDeselected dashTab
12:09:51.566:MUP0:WARN:Log:appTabSelected tab1
12:09:53.276:MUP3:WARN:Log:selectTabObject [ImgTab ID:dashTab]
12:09:53.290:MUP3:WARN:Log:appTabSelected dashTab
12:09:53.328:MUP3:WARN:Log:selectTabObject [ImgTab ID:tab1]
12:09:53.340:MUP3:WARN:Log:appTabDeselected dashTab
12:09:53.357:MUP3:WARN:Log:appTabSelected tab1

Why the difference in behavior and why the additional (and unnecessary) actions in IE ?
And, most importantly, what can be done to prevent these additional (and unnecessary) actions from being performed ? Can something be done in my code ? Or is it a SmartClient problem ?

Thank you

[Isomorphic]

This is due to bugs in IE, but we believe we have normalized this in 8.0. Please try a recent nightly.

[gli]

This is due to bugs in IE, but we believe we have normalized this in 8.0. Please try a recent nightly.

Hello,

I have tried with the 2011-02-15 nightly build and I have the same behavior. See the attached screencast.

[Isomorphic]

It's invalid to call closeClick() as a means of removing a tab - call removeTab() instead and it should correct this issue.

[gli]

It's invalid to call closeClick() as a means of removing a tab - call removeTab() instead and it should correct this issue.

Thank you for the suggestion. I have tried it by modifying the test case (see below) and in my application but it doesn't change anything. I still have the same behavior.

isc.setAutoDraw(false);
isc.TabSet.create({
    ID: "appTabSet", tabBarPosition: "top", autoDraw: true, width: "700", height : "100%",
	tabSelected: function (tabNum, tabPane, ID, tab) {
		isc.logWarn ("appTabSelected " + ID);
	},
	tabDeselected: function (tabNum, tabPane, ID, tab) {
		isc.logWarn ("appTabDeselected " + ID);
	},
	selectTab: function (tab) {
		var tb = this.getTab (tab);
		if (tb) {
			isc.logWarn ("selectTabObject " + tb);
		}
		this.Super("selectTab", arguments);
	},
	tabs: [
		{ title: "Dashboard", ID: "dashTab", autoDraw: false, pane: isc.Label.create ({contents : "Dashboard" }) }
	]
});
var tabNumber = 1;
isc.Button.create ({
	left: "710", title: "Add", autoDraw: true,
	click: function () {
		appTabSet.addTab ({
			title: "Tab" + tabNumber,
		    ID: "tab" + tabNumber,
			autoDraw: true,
			pane: isc.Label.create ({contents : "Tab" + tabNumber })
			});
		appTabSet.selectTab ("tab" + tabNumber);
		tabNumber = tabNumber + 1;
	}
});
isc.Button.create ({
	left: "910", width: 300, autoDraw: true, title: "Remove then Add",
	click: function () {
		appTabSet.removeTab ("tab" + (tabNumber - 1));
		appTabSet.addTab ({
			title: "Tab" + tabNumber,
		    ID: "tab" + tabNumber,
			autoDraw: true,
			pane: isc.Label.create ({contents : "Tab" + tabNumber })
			});
		appTabSet.selectTab ("tab" + tabNumber);
		tabNumber = tabNumber + 1;
	}
});

[Isomorphic]

Hi Gli,
We see the problem - it's due to a quirk in the way Internet Explorer handles focus as opposed to other browsers.
Our engineers will be looking into how best to avoid this in the framework but a workaround for you would be to delay the call to focus in the newly added tab, as in the updated version of your code below:

isc.setAutoDraw(false);
isc.TabSet.create({
    ID: "appTabSet", tabBarPosition: "top", autoDraw: true, width: "700", height : "100%",
	tabSelected: function (tabNum, tabPane, ID, tab) {
		isc.logWarn ("appTabSelected " + ID);
	},
	tabDeselected: function (tabNum, tabPane, ID, tab) {
		isc.logWarn ("appTabDeselected " + ID);
	},
	selectTab: function (tab) {
		var tb = this.getTab (tab);
		if (tb) {
			isc.logWarn ("selectTabObject " + tb);
		}
		this.Super("selectTab", arguments);
	},
	tabs: [
		{ title: "Dashboard", ID: "dashTab", autoDraw: false, pane: isc.Label.create ({contents : "Dashboard" }) }
	]
});
var tabNumber = 1;
isc.Button.create ({
	left: "710", title: "Add", autoDraw: true,
	click: function () {
		appTabSet.addTab ({
			title: "Tab" + tabNumber,
		    ID: "tab" + tabNumber,
			pane: isc.Label.create ({contents : "Tab" + tabNumber })
			});
		appTabSet.selectTab ("tab" + tabNumber);
		tabNumber = tabNumber + 1;
	}
});
isc.Button.create ({
	left: "910", width: 300, autoDraw: true, title: "Remove then Add",
	click: function () {		
	
	    appTabSet.removeTab ("tab" + (tabNumber - 1));
        appTabSet.addTab ({
			title: "Tab" + tabNumber,
		    ID: "tab" + tabNumber,
			pane: isc.Label.create ({contents : "Tab" + tabNumber })
			});
		this.delayCall("selectNextTab");
    },
    selectNextTab : function () {
		appTabSet.selectTab ("tab" + tabNumber);
		tabNumber = tabNumber + 1;
	}
});

[gli]

Hi Gli,
We see the problem - it's due to a quirk in the way Internet Explorer handles focus as opposed to other browsers.
Our engineers will be looking into how best to avoid this in the framework but a workaround for you would be to delay the call to focus in the newly added tab, as in the updated version of your code below:

I tried the workaround, it works. However, if you solve this issue, can you please inform us ? Even if the delay defined is 0, there is still a small but noticeable delay in the UI and the behavior can be a bit disturbing to the user.

Thank you.