6.5.1 Classic: Menu + Window + Modal == broken menu

[fabricio.object]

In the following fiddle, if you click the "Modal" button, then the menu triggered by the "Menu" button becomes stuck once it is clicked.



You can just click the modal button right when opening the example, and then expand the menu. This may or may not happen all the time. I tested this using latest google chrome (60.0.3112.113).

What to expect in different web browsers:
- Chrome: reproduces the issue
- Internet Explorer 11: reproduces the issue
- Firefox (latest): reproduces the issue
- MS-Edge: does not reproduce the issue (at least I tried several times and couldn't)

[fabricio.object]

Seems the menu's hidden property is not properly set when the modal MessageBox is displayed. If I changed the fiddle to this, I can click some times in the show and hide buttons to "address" the issue (in a very pragmatic way):



EDIT: yes, I also tested, instead of using little messagebox modals, creating yet another window, with or without the modal setting, and then just calling its show/hide methods. It also breaks the menu. You don't need to interact with the menu at all, to break it down.

[fabricio.object]

Additional information: this is a bug with the z-index manager. When a component is hid (or destroyed), the z-Index manager 'front' object gets undefined, so when we try to select the button to expand the menu, it immediately switches back to the topMost component from the z-Index manager and focuses out of the button.

But then a race condition enters, in which as it is triggered during the button menu's show event, the menu gets the 'hidden' property set back to 'true', its DOM element is effectively hid, BUT, the menu manager object gets the menu object into its list of currently visible menus. This brings an inconsistency where the menu is hidden by its 'hidden' property yet it is visible by the menu manager's 'visible' list.

I hope this helps addressing the issue!

[Animal]

Looks like a bug.

FWIW, the "Modern" z-index management is much simpler and more elegant. There is no "Manager". Floated Components physically move up in the DOM stack to go above their peers.

The example works fine in Modern!

https://fiddle.sencha.com/#fiddle/278v&view/editor

[Proffnet]

fabricio.object you are quite right. My solution for this problem is override on Ext.window.MessageBox on btnCallback function.

btnCallback: function(btn, event){

this.callParent([btn, event]);

if(this.zIndexManager.topMost)
this.zIndexManager.front = this.zIndexManager.topMost;

}

Hope it helps someone.

[kellerkichel]

Works for me, thanks

[Proffnet]

The problem was deeper then we expected.
It occures on every modal window not only MessageBox.
The final override is on ZIndexManager not on MessageBox .
So far it solve the problem.

Ext.define('YourApp.overrides.ZIndexManager', {
    override: 'Ext.ZIndexManager',
    onCollectionSort: function() {
        var zIndex = this.callParent();
        if(!this.front && this.topMost)
            this.front = this.topMost;
        return zIndex;
    }
});