Extjs Submenus disappear on Chrome 43

Question

How to fix submenus disappearing in Chrome 43?

Using Extjs 4.

This was working on previous versions of Chrome.

Answer 1

This overrides needs to be added in order to fix this.

https://www.sencha.com/forum/showthread.php?301116-Submenus-disappear-in-Chrome-43-beta

(Thanks to festr user on Sencha forum - thought this needed to be on SO too)

// fix hide submenu (in chrome 43)
Ext.override(Ext.menu.Menu, {
    onMouseLeave: function(e) {
    var me = this;


    // BEGIN FIX
    var visibleSubmenu = false;
    me.items.each(function(item) { 
        if(item.menu && item.menu.isVisible()) { 
            visibleSubmenu = true;
        }
    })
    if(visibleSubmenu) {
        //console.log('apply fix hide submenu');
        return;
    }
    // END FIX


    me.deactivateActiveItem();


    if (me.disabled) {
        return;
    }


    me.fireEvent('mouseleave', me, e);
    }
});

Answer 2

In regards to that same link, https://www.sencha.com/forum/showthread.php?301116-Submenus-disappear-in-Chrome-43-beta, here's a more general, non-specific fix thanks to post #27 by siq:

Ext.apply(Ext.EventManager,{
    normalizeEvent: function(eventName, fn) {

        //start fix
        var EventManager = Ext.EventManager,
            supports = Ext.supports;
        if(Ext.chromeVersion >=43 && eventName == 'mouseover'){
            var origFn = fn;
            fn = function(){
                var me = this,
                    args = arguments;
                setTimeout(
                    function(){
                        origFn.apply(me || Ext.global, args);
                    },
                    0);
            };
        }
        //end fix

        if (EventManager.mouseEnterLeaveRe.test(eventName) && !supports.MouseEnterLeave) {
            if (fn) {
                fn = Ext.Function.createInterceptor(fn, EventManager.contains);
            }
            eventName = eventName == 'mouseenter' ? 'mouseover' : 'mouseout';
        } else if (eventName == 'mousewheel' && !supports.MouseWheel && !Ext.isOpera) {
            eventName = 'DOMMouseScroll';
        }
        return {
            eventName: eventName,
            fn: fn
        };
    }
});

This has been tested on my end and I can verify that it works (v. 4.1.2).