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