Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1)

classic Classic list List threaded Threaded
18 messages Options
Reply | Threaded
Open this post in threaded view
|

Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1)

tsemachh
Hi
Facing very weird behavior on IE9.
I have TabContainer which contain few Tabs:
a. Two are of type dijit/layout/BorderContainer
b. Others extend dijit/_Widget
At some point the Tabs of type b start behave as followed:
Their Title is changing to true/false strings based on the focused state of the Widget
This happens also to the inner Tabs on those tabs.
Attaching 2 screen shots:
Profile of What happens when Tab name is true/false
Screen Shot of what happens with tab titles

This is not happening all the time but happens quite often.
Any direction would be appreciated.

thx
tsemach
Reply | Threaded
Open this post in threaded view
|

Re: Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1)

shane
I've never tried this out, but I wonder if you could easily add a breakpoint that monitored that condition using "watch": 

tab.watch("label", function() {
var label = tab.get("label"); 
if (label == "true" || label == "false")
debugger;
}); 




Shane Green
805-452-9666 | [hidden email]

On Dec 25, 2012, at 4:17 AM, tsemachh <[hidden email]> wrote:

Hi
Facing very weird behavior on IE9.
I have TabContainer which contain few Tabs:
a. Two are of type dijit/layout/BorderContainer
b. Others extend dijit/_Widget
At some point the Tabs of type b start behave as followed:
Their Title is changing to true/false strings based on the focused state of
the Widget
This happens also to the inner Tabs on those tabs.
Attaching 2 screen shots:
<http://dojo-toolkit.33424.n3.nabble.com/file/n3992531/IE9PRofileWhenLabelIsChanging.png>
<http://dojo-toolkit.33424.n3.nabble.com/file/n3992531/TabsTitleTrueFalseIE9.png>

This is not happening all the time but happens quite often.
Any direction would be appreciated.

thx
tsemach



--
View this message in context: http://dojo-toolkit.33424.n3.nabble.com/Weird-TabContainer-Tabs-Title-behavior-IE9-Dojo-1-8-1-tp3992531.html
Sent from the Dojo Toolkit mailing list archive at Nabble.com.
________________________________________________________
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


________________________________________________________
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1)

tsemachh
Thx , tried that , doesn't get there maybe because title is used in the Pane rather than label which is used in the Button used to create the Tab Title.
Reply | Threaded
Open this post in threaded view
|

Re: Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1)

tsemachh
Tried listening on title changes , but changes seem to change only label not the title of the Tab.
Another weird thing I am able to recreate it when I start new Session on IE , if it's old session it's hard to recreate it.
Anyway I will try to listen on the label of the Button of the Tab there it should be.
thx
tsemach.
Reply | Threaded
Open this post in threaded view
|

Re: Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1)

Karl Tiedt

Create a js fiddle example rust allows this? Or provide your example code to be reviewed...


________________________________________________________
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1)

tsemachh
Thx - Tried to create http://jsfiddle.net/tsemachh/Ayzwn/7/ but it's not reproducable there and my code base is pretty large.
I will then provide the code I use:
I am in a widget which extends TabContainer and do the following:
                                newTab=new amdocs.awfui.application.advertiser.AdvertiserTab({
                                        "class":"AdvertiserTabs",
                                        style:"padding:5px;",
                                        language:lang,products:products,
                                        openEntity:entity,openEntityId:entityId,advertiserId:id,iconClass:"AdvertiserTab",id:id+"Details",closable:true,title:title});
                                this.addChild(newTab);
AdvertiserTab byitself is another Widget which I am attachingAdvertiserTab.js

Another Widget I am adding as followed:
                                searchTab=new amdocs.awfui.application.search.Search({id:"searchTab",style:"width:100%;height:100%;background-color:#FFFFFF",iconClass:"SearchTab",searchTerm:searchTerm,closable:true});
                                this.addChild(searchTab);
I am attaching the code of it as well Search.js

I am not sure what causes this behavior , in worst case I will try to make all Widget Extend ContentPane and will check if it helps
Reply | Threaded
Open this post in threaded view
|

Re:Messup of events on & emit on IE9 dojo 1.8.1 - (Was Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1))

tsemachh
After a long combat I was able to get to the bottom of it.
The focus event caused all this mess here's the Stack Trace:
        Anonymous Function (StackController.js  - 140)
> emit -> dispatchEvent (on.js - 322)
        emit
        _set
        _setFocusedAttr
        set
        _setStack
        _onTouchNode
        mousedownListener
The Anonymous function is below:
dijit.layout.StackController
                onStartup: function(/*Object*/ info){
                                connectFunc = function(attr, buttonAttr){
                                        return on(containerNode, "attrmodified-" + attr, function(evt){
                                                var button = pane2button[evt.detail && evt.detail.widget && evt.detail.widget.id];
                                                if(button){
                                                        button.set(buttonAttr, evt.detail.newValue);
                                                }
                                        });
                                };
                        for(var attr in paneToButtonAttr){
                                this.own(connectFunc(attr, paneToButtonAttr[attr]));
                        }
Now what I see is that focus events of type attrmodified-focused are going to various events which were subscribed here such as disable/title/showTitle etc.
This causes very weird behavior of the Tabs.
To overcome it I can make double check the type on the event is the expected type.
Any idea how can I check what causes this event mess ?
thx
tsemach
Reply | Threaded
Open this post in threaded view
|

Re: Messup of events on & emit on IE9 dojo 1.8.1 - (Was Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1))

Bill Keese-2
tsemachh - Sorry I never replied to this.

First of all, since this is StackController, I assume that the error happens when clicking
the tab labels or close buttons or something like that?   Events inside the TabContainer *panes* shouldn't have any effect because
they won't bubble up to StackController.containerNode.   But please confirm.

You said that:

Now what I see is that focus events of type attrmodified-focused are going to various events which were subscribed here such as disable/title/showTitle etc. 

Hmm, very weird.   So inside that anonymous function, evt.type == "attrmodified-focus"?   I can't imagine why that would happen.  I guess it's an IE9 issue since this only happens on IE9, but it's hard to debug without a test case.

BTW, what is evt.target?




On Sun, Jan 13, 2013 at 11:18 PM, tsemachh <[hidden email]> wrote:
After a long combat I was able to get to the bottom of it.
The focus event caused all this mess here's the Stack Trace:
        Anonymous Function (StackController.js  - 140)
>       emit -> dispatchEvent (on.js - 322)
        emit
        _set
        _setFocusedAttr
        set
        _setStack
        _onTouchNode
        mousedownListener
*The Anonymous function is below:*
dijit.layout.StackController
                onStartup: function(/*Object*/ info){
                                connectFunc = function(attr, buttonAttr){
                                        return on(containerNode, "attrmodified-" + attr, function(evt){
                                                var button = pane2button[evt.detail && evt.detail.widget &&
evt.detail.widget.id];
                                                if(button){
                                                        button.set(buttonAttr, evt.detail.newValue);
                                                }
                                        });
                                };
                        for(var attr in paneToButtonAttr){
                                this.own(connectFunc(attr, paneToButtonAttr[attr]));
                        }
Now what I see is that focus events of type attrmodified-focused are going
to various events which were subscribed here such as disable/title/showTitle
etc.
This causes very weird behavior of the Tabs.
To overcome it I can make double check the type on the event is the expected
type.
Any idea how can I check what causes this event mess ?
thx
tsemach



--
View this message in context: http://dojo-toolkit.33424.n3.nabble.com/Weird-TabContainer-Tabs-Title-behavior-IE9-Dojo-1-8-1-tp3992531p3993033.html
Sent from the Dojo Toolkit mailing list archive at Nabble.com.
________________________________________________________
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


________________________________________________________
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Messup of events on & emit on IE9 dojo 1.8.1 - (Was Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1))

tsemachh
Hi bill
The error happens when focus event happens or any other event which doesn't relates to the actual listener
(Aka visually it was label setting disable setting etc.)
Check the first Thread Dump I took on the thread to see how it goes.

As for the events , I do think it's IE9 issue as it happens only there.
I think it's related to the dispatchEvent on IE9 which is considered synthetic from what I saw.
(Something may break it , but I wasn't able to tell what even after removal most of the code there)
I tried to have Fiddle at the time but it's incomplete http://jsfiddle.net/tsemachh/Ayzwn/7/ 
I may miss there some of the items as it's a large application we have there.(or maybe in document level)
the evt.target I think it was the child widget of that corresponding button on the stack Controller.
Anyway for now I patched it as followed:
                connectFunc = function(attr, buttonAttr){
                                        return on(containerNode, "attrmodified-" + attr, function(evt){
                                                if (evt.type == ("attrmodified-" + attr)){
                                                var button = pane2button[evt.detail && evt.detail.widget && evt.detail.widget.id];
                                                if(button){
                                                        button.set(buttonAttr, evt.detail.newValue);
                                                        }
                                                }
                                        });
                                };
And all is o.k. since then  , no complains from users since.

tsemach.
Reply | Threaded
Open this post in threaded view
|

Re: Messup of events on & emit on IE9 dojo 1.8.1 - (Was Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1))

Bill Keese-2
OK, glad you have a workaround.

So when the user clicks a TabButton it emits a attrmodified-focus event, which bubbles up to the TabController and for some reason triggers the listener for attrmodified-title (and then bad things happen).   Weird.

> I think it's related to the dispatchEvent on IE9 which is considered synthetic from what I saw.

Hmm, you are right, according to the stack trace it's following the "old IE" path to emit the event synthetically, although I don't understand why.   I thought IE9+ had a native dispatchEvent() method on nodes, so the native if() branch should trigger:

if(target.dispatchEvent && document.createEvent)

Maybe there's something weird like you are clicking a text node (rather than a normal node where nodeType == 1), and that text node doesn't have a dispatchEvent() method?

On Fri, May 10, 2013 at 3:33 PM, tsemachh <[hidden email]> wrote:
Hi bill
The error happens when focus event happens or any other event which doesn't
relates to the actual listener
(Aka visually it was label setting disable setting etc.)
Check the first Thread Dump I took on the thread to see how it goes.

As for the events , I do think it's IE9 issue as it happens only there.
I think it's related to the dispatchEvent on IE9 which is considered
synthetic from what I saw.
(Something may break it , but I wasn't able to tell what even after removal
most of the code there)
I tried to have Fiddle at the time but it's incomplete
http://jsfiddle.net/tsemachh/Ayzwn/7/
I may miss there some of the items as it's a large application we have
there.(or maybe in document level)
the evt.target I think it was the child widget of that corresponding button
on the stack Controller.
Anyway for now I patched it as followed:
                connectFunc = function(attr, buttonAttr){
                                        return on(containerNode, "attrmodified-" + attr, function(evt){
*                                               if (evt.type == ("attrmodified-" + attr)){
*                                               var button = pane2button[evt.detail && evt.detail.widget &&
evt.detail.widget.id];
                                                if(button){
                                                        button.set(buttonAttr, evt.detail.newValue);
                                                        }
                                                *}*
                                        });
                                };
And all is o.k. since then  , no complains from users since.

tsemach.




--
View this message in context: http://dojo-toolkit.33424.n3.nabble.com/Weird-TabContainer-Tabs-Title-behavior-IE9-Dojo-1-8-1-tp3992531p3996422.html
Sent from the Dojo Toolkit mailing list archive at Nabble.com.
________________________________________________________
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


________________________________________________________
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Messup of events on & emit on IE9 dojo 1.8.1 - (Was Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1))

tsemachh
From what I saw it doesn't comes from click , it happens from any event which is on the Tab Level.
(The purpose of that code it to propagate the event to button level as I understood)
Most of the times it was focus event , but also events which touch the title of the widget or even mouse over the button also caused that to happen.
BTW not only label but also other attributes got that messup:
                        "title": "label",
                                        "showtitle": "showLabel",
                                        "iconclass": "iconClass",
                                        "closable": "closeButton",
                                        "tooltip": "title",
                                        "disabled": "disabled"
Maybe something is messed up on the dispatchEvent impl. in IE9. no idea , but for me it looks like memory leak somewhere on IE9, even though I ran few tools found nothing on regards on my code.
For now I maintain it in the list of patches to dojo sources I maintain internally , maybe later on we'll recheck it again on IE10(Or dojo 2.0) , with more accurate fix.

thx
tsemach.
Reply | Threaded
Open this post in threaded view
|

Re: Messup of events on & emit on IE9 dojo 1.8.1 - (Was Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1))

Bill Keese-2
On Fri, May 10, 2013 at 5:11 PM, tsemachh <[hidden email]> wrote:
From what I saw it doesn't comes from click , it happens from any event which
is on the Tab Level.

Can you explain what you mean by "on the Tab Level"?

I just looked at the stack trace and the code more carefully.   It seems like one of the widgets inside a TabContainer pane (perhaps a TabButton of a nested TabContainer, or some other random widget) is emitting the attrmodified-focused event.   So my theory about the text node (nodeType != 1) doesn't make sense.
 
(The purpose of that code it to propagate the event to button level as I
understood)
Most of the times it was focus event , but also events which touch the title
of the widget or even mouse over the button also caused that to happen.

Mouse over which button?   Perhaps the tab label of a nested TabContainer?
 



________________________________________________________
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Messup of events on & emit on IE9 dojo 1.8.1 - (Was Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1))

tsemachh
Sorry for the late response.
"The Tab Level" - means any event like changing the Tab label or focusing on a tab.
And yes I do have nested tabs in some of the tabs there , and maybe you are on something here ,
because I noticed this also happens when we mouse over the nested tabs in one of the tabs suddenly other tabs label start changing or got disabled.
I still think it's something on how IE9 manages its events , as it works well in other browsers(Including IE8, FF, Chrome), and the bottom line is that events are landing in wrong handlers..
(And Event changed in IE9 so this is subject to errors)
Another option is that something in my code does it but I doubt as I tried to remove almost everything and I still had it.
thx
tsemach
Reply | Threaded
Open this post in threaded view
|

Re: Messup of events on & emit on IE9 dojo 1.8.1 - (Was Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1))

Kenneth G. Franqueiro
If I'm reading this thread right, it sounds like you're probably running
into this bug:

http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/99665041-557a-4c5f-81d8-a24230ecd67f

As far as I've seen, the cause of this is usually clicking on an <a> tag
that doesn't actually go anywhere, but also doesn't cancel the event
(with preventDefault).  We ran into it in dgrid too:
https://github.com/SitePen/dgrid/issues/379#issuecomment-14877163

So I'd say check your application for instances of <a> tags which don't
go anywhere (e.g. have href="javascript:") but also aren't having their
events canceled, and make sure to cancel their events.

--Ken

On 5/11/2013 4:35 PM, tsemachh wrote:

> Sorry for the late response.
> "The Tab Level" - means any event like changing the Tab label or focusing on
> a tab.
> And yes I do have nested tabs in some of the tabs there , and maybe you are
> on something here ,
> because I noticed this also happens when we mouse over the nested tabs in
> one of the tabs suddenly other tabs label start changing or got disabled.
> I still think it's something on how IE9 manages its events , as it works
> well in other browsers(Including IE8, FF, Chrome), and the bottom line is
> that events are landing in wrong handlers..
> (And Event changed in IE9 so this is subject to errors)
> Another option is that something in my code does it but I doubt as I tried
> to remove almost everything and I still had it.
> thx
> tsemach
>
>
>
> --
> View this message in context: http://dojo-toolkit.33424.n3.nabble.com/Weird-TabContainer-Tabs-Title-behavior-IE9-Dojo-1-8-1-tp3992531p3996473.html
> Sent from the Dojo Toolkit mailing list archive at Nabble.com.
> ________________________________________________________
> Dojo Toolkit: http://dojotoolkit.org/
> Tutorials: http://dojotoolkit.org/documentation/
> Reference Guide: http://dojotoolkit.org/reference-guide
> API Documentation: http://dojotoolkit.org/api
>
> [hidden email]
> To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>
________________________________________________________
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Messup of events on & emit on IE9 dojo 1.8.1 - (Was Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1))

tsemachh
thx Kenneth
I do have some links of type:
<a href="javascript:void(0);" onclick="openAdvertiserDetails(someParams)"> 
and event is not passed to that callback(Neither window.event is null)

I will take the dgrid solution , making them styled spans this I hope will resolve this issue once and for all.

So I will summarize for next time:
1. Avoid using anchors for navigation and if you do handle the event properly and make sure to cancel the event.(Otherwise IE will messup the events in the application)
2. Use styled spans for inter-navigation in the application.

thank you all for your help.

tsemach.
Reply | Threaded
Open this post in threaded view
|

Re: Messup of events on & emit on IE9 dojo 1.8.1 - (Was Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1))

vinay b
HI tsemachh,

I am facing exact same issue .Now i tried to change anchor tag to span tag no help , i kept anhor tag and tried the cancel event by calling return false in method no change .What was the actual fix for this issue.
Reply | Threaded
Open this post in threaded view
|

Re: Messup of events on & emit on IE9 dojo 1.8.1 - (Was Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1))

Bill Keese-2
Just stop using <a> altogether (except for actual links).

On Tue, Apr 14, 2015 at 6:49 PM, vinay b <[hidden email]> wrote:
HI tsemachh,

I am facing exact same issue .Now i tried to change anchor tag to span tag
no help , i kept anhor tag and tried the cancel event by calling return
false in method no change .What was the actual fix for this issue.



--
View this message in context: http://dojo-toolkit.33424.n3.nabble.com/Weird-TabContainer-Tabs-Title-behavior-IE9-Dojo-1-8-1-tp3992531p4005891.html
Sent from the Dojo Toolkit mailing list archive at Nabble.com.
--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Messup of events on & emit on IE9 dojo 1.8.1 - (Was Weird TabContainer Tabs Title behavior IE9 (Dojo 1.8.1))

tsemachh
Eventually I summarized it there , it was memory leak due to the usage of anchors on IE.
When we fixed the anchors all was o.k. then.
I would check around if you use any other HTML Element where it's not serving its original purpose.
I faced similar issues with buttons and inputs where IE was doing strange things if you would use them in markup.

tsemach.