ExtJS 6 - Stop Event Delegation while hiding component?

Question

I have to hide same field on it's blur event.

Extjs 6 calls event delegation on component hide method.Event delegation revert focus to last field which had focus.

And, I don't want this revert focus. Is there any way I can stop event delegation while hiding elements in extjs ?

Event delegation comes with extjs 5 - Delegated Events and Gestures in Ext JS 5

Method using for hide - https://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.Component-method-onHide

onHide() method from ExtJS source code - check revertFocus()

onHide: function(animateTarget, cb, scope) {
    var me = this,
        ghostPanel, fromSize, toBox;
    if (!me.ariaStaticRoles[me.ariaRole]) {
        me.ariaEl.dom.setAttribute('aria-hidden', true);
    }
    // Part of the Focusable mixin API.
    // If we have focus now, move focus back to whatever had it before.
    me.revertFocus(); // this revert focus making probelm
    // Default to configured animate target if none passed
    animateTarget = me.getAnimateTarget(animateTarget);
    // Need to be able to ghost the Component
    if (!me.ghost) {
        animateTarget = null;
    }
    // If we're animating, kick off an animation of the ghost down to the target
    if (animateTarget) {
        toBox = {
            x: animateTarget.getX(),
            y: animateTarget.getY(),
            width: animateTarget.dom.offsetWidth,
            height: animateTarget.dom.offsetHeight
        };
        ghostPanel = me.ghost();
        ghostPanel.el.stopAnimation();
        fromSize = me.getSize();
        ghostPanel.el.animate({
            to: toBox,
            listeners: {
                afteranimate: function() {
                    delete ghostPanel.componentLayout.lastComponentSize;
                    ghostPanel.el.hide();
                    ghostPanel.setHiddenState(true);
                    ghostPanel.el.setSize(fromSize);
                    me.afterHide(cb, scope);
                }
            }
        });
    }
    me.el.hide();
    if (!animateTarget) {
        me.afterHide(cb, scope);
    }
},

Answer 1

I got the same problem. (extjs 6.5.1 - using a modal window with closeAction: 'hide')

I was debugging the code and seems it happened because the latest field focused was in a panel and my modal window was not child of that panel. (seems the extjs get the ancestor of the modal window to find the latest focused field, then, set the focus)

When I added the window to that panel, it worked fine. (when the modal window was closed, the focus was on the latest field focused before open the window).

Debugging the Ext.util.Focusable class, I saw a config called preventRefocus. If you add that config with value true to your modal window, the content of the revertFocus function won't be executed and you won't get the error.

revertFocus: function() {
        var me = this,
            focusEvent = me.focusEnterEvent,
            activeElement = Ext.Element.getActiveElement(),
            focusTarget, fromComponent, reverted;

        // If we have a record of where focus arrived from, 
        //  and have not been told to avoid refocusing, 
        //  and we contain the activeElement. 
        // Then, before hiding, restore focus to what was focused before we were focused. 

        // --->>> THE IF BELOW: !me.preventRefocus <<<---

        if (focusEvent && !me.preventRefocus && me.el.contains(activeElement)) {

I hope it also can help somebody in the future.

Answer 2

You are doing it wrong, revertFocus() is a main problem source. The solution might be:

blurEventFunction:function(cmp){
    cmp.previousFocus = null;
    cmp.hide();
}

Answer 3

Use suspendEvents and resumeEvents in the function you are calling in the viewcontroller when the blur event fires:

It's not stopEvents is suspendEvents. My fault. :P

blurEventFunction:function(cmp){
    cmp.suspendEvents();
    cmp.hide();
    camp.resumeEvents();
}