[4.2.0 beta 2] TreePanel in menu in IE9: clicking quickly expand/collapse hides menu

**Daniil** · 10 Jan 2013 10:34 PM

REQUIRED INFORMATION

Ext version tested:

Ext 4.2.0 beta 1
Ext 4.2.0 beta 2

Browser versions tested against:

IE9 - FAIL
IE9 in IE8 mode and IETester IE8 - FAIL. So, I suspect it is reproducible with original IE8.
FF - PASS
Chrome - PASS

DOCTYPE tested against:

<!DOCTYPE html>

Description:

IE9, IE9 in IE8 mode, IETester IE8. A TreePanel is into a menu of a button. If click quickly a collapse/expand icon of a node it causes hiding a menu. It can occur after 3-4 clicks, sometimes it requires a lot of clicks, sometimes it happens just after two clicks. Well, it is not a problem if it requires a lot of clicks, but hiding a menu after 2 clicks can annoy a user. But, that is more important, there is, probably, a problem in the sources which, potentially, can lead to another issues.
It is not reproducible in FireFox and Chrome.

Steps to reproduce the problem:

Click the Button to get the Menu open
Click quickly the expand/collapse icon of any node
At some moment the menu hides. It can occur after 3-4 clicks, sometimes it requires a lot of clicks, sometimes it happens just after two clicks.

The result that was expected:

The menu doesn't hide

The result that occurs instead:

The menu hides

Test Case:

Code:

<!DOCTYPE html>
<html>
<head>
    <title>TreePanel IE9 menu collapse if clicking fast</title>

    <link rel="stylesheet" href="../resources/css/ext-all.css" />
    <script src="../ext-all-debug.js"></script>

    <script>
        Ext.onReady(function () {
            Ext.create("Ext.window.Window", {
                height: 200,
                width: 300,
                tbar: {
                    items: [{
                        text: "Menu",
                        menu: {
                            items: [{
                                xtype: "treepanel",
                                height: 350,
                                width: 300,
                                animate: false, // it is also reproducible with true
                                root: {
                                    text: "Composers",
                                    expanded: true,
                                    children: [{
                                        text: "Beethoven",
                                        children: [{
                                            text: "Concertos",
                                            children: [{
                                                leaf: true,
                                                text: "No. 1 - C"
                                            }, {
                                                leaf: true,
                                                text: "No. 2 - B-Flat Major"
                                            }, {
                                                leaf: true,
                                                text: "No. 3 - C Minor"
                                            }, {
                                                leaf: true,
                                                text: "No. 4 - G Major"
                                            }, {
                                                leaf: true,
                                                text: "No. 5 - E-Flat Major"
                                            }]
                                        }]
                                    }]
                                }                                
                            }]
                        }
                    }]
                }                
            }).show();
        });
    </script>
</head>
<body>

</body>
</html>

HELPFUL INFORMATION

Debugging already done:

The menu hides here.

Ext.menu.Manager onMouseDown

Code:

onMouseDown: function(e) {
    var me = this,
        active = me.active,
        lastShow = me.lastShow;

    if (Ext.Date.getElapsed(lastShow) > 50 && active.length > 0 && !e.getTarget('.' + Ext.baseCSSPrefix + 'menu')) {
        me.hideAll();
    }
}

Operating System:

Windows 7

**evant** · 10 Jan 2013 11:38 PM

Are you saying you need to quickly click after the menu is displayed, or repeated clicks on expand/collapse for the same node?

Either way, I'm not able to reproduce it. Seems like a pretty obscure bug at best.

**Daniil** · 10 Jan 2013 11:42 PM

Hi Evan,

Repeated clicks on expand/collapse for the same node.

Yes, agree it is a bit obscure. Sometimes it is hard to reproduce, but sometimes it is really easy, it can happen just after two clicks.

**bogc** · 11 Jan 2013 12:34 AM

I was able to reproduce this as well. Based on the debugging that I have done, at one point the expression e.getTarget('.' + Ext.baseCSSPrefix + 'menu') evaluates to null and me.hideAll() is invoked. It is as if the target element of the click is outside of the menu.

The bug may seem obscure but it can be extremely annoying. Please don't discard it. Can you ask another colleague to try it?

The other option would be trigger the mouse click programmatically and simulate the clicks. I would have to look into it.

**Daniil** · 11 Jan 2013 3:33 AM

I can add that my colleague is also able to reproduce.

**bogc** · 11 Jan 2013 12:28 PM

Evan:

There is a very easy way to reproduce this without straining your hand. I will describe it here.

I downloaded a program called autoclicker that simulates mouse clicks. You can get it from here:

http://www.murgee.com/auto-clicker/download/setup.exe

It is free to try and it doesn't seem to have any viruses (in case you are concerned about that). I have a windows 7 64 bit VM that I used to test this.

Open the page that Daniil created in IE 9 (click on the Menu to display the tree, the Composers button is expanded and the Beethoven node is collapsed) and run autoclicker, having both side by side.
Set the delay between clicks to 100ms and set the number of clicks to 50.
Click on the L button. A new dialog pops up where you can set the mouse location. Select 'Specify a fixed location' and click the Pick Location button. Then click on the + sign for the Beethoven node. Click ok to close the dialog
Click the Start clicking button. The menu disappears after a few seconds and the cursor becomes a red arrow while the clicks are still played. This is reproduceable 100% every time I replay the clicks.
Repeat the steps above with FF and Chrome. You'll see that the menu doesn't disappear and the node is collapsed and expanded properly.

You might want to play with other delay times and perhaps add some random factor. I haven't done it.

autoclicker_screenshot.png

pick_location.png

**bogc** · 15 Jan 2013 9:15 AM

Any resolution on this? I provided a way that is 100% guaranteed to reproduce this issue. Is there anything else that is needed?

**evant** · 15 Jan 2013 4:14 PM

I'll push it to the tracker, but it's quite difficult to reproduce. At this point it's not a high priority.

**Daniil** · 15 Jan 2013 11:25 PM

Thank you, Evan, for opening a bug ticket!

I see it is already fixed. Excellent!

@bogc, thank you for your contribution!

**bogc** · 25 Jan 2013 10:16 AM

Is there a patch that I could apply in ExtJs 4.1.1 to fix this?

Thank you

[4.2.0 beta 2] TreePanel in menu in IE9: clicking quickly expand/collapse hides menu

Thread Tools

Search Thread

Display

[4.2.0 beta 2] TreePanel in menu in IE9: clicking quickly expand/collapse hides menu

[4.2.0 beta 2] TreePanel in menu in IE9: clicking quickly expand/collapse hides menu