MessageBox cannot be closed under some circumstances.

[YuriM]

Touch version tested:

• Touch 2.3.1a rev 410, Touch 2.3.0

Browser versions tested against:

• Chrome Version 34.0.1847.116
• Texet Android device

DOCTYPE tested against:

• ____

Description:

• While developing application I faced with problem on some devices: messagebox cannot be closed - mask disappears, button becomes "pushed", but messagebox is not hidden. This is related or the same to http://www.sencha.com/forum/showthre...TC-One-Browser .
• I'm able to reproduce the same behavior in chrome browser on ST demo page http://cdn.sencha.com/touch/sencha-t...ink/index.html by calling Ext.Msg.alert('test') several times (see https://www.youtube.com/watch?v=PIvF...ature=youtu.be ). As you can see on this video, I'm calling alert and closing it, but after few tries it appears without animation and becomes broken, it also breaks any other popup dialogs (prompts, alerts, confirmations).
• It works fine with disabled show/hide animations (see workarounds in link above).

Steps to reproduce the problem:

• call "Ext.Msg.alert('test')" in chrome console
• close dialog
• goto 1

The result that was expected:

• dialog always closed

The result that occurs instead:

• after few tries dialog cannot be closed

[fmoseley]

Thanks for the report! I just tested this against our latest nightly build and this issue appears to have been fixed.

[YuriM]

I've found a workaround for this (I cannot just update application to the latest build), if somebody faced with the same issue.
While debugging I noticed, that activeAnimation is blocking messagebox from closing properly, so the workaround is to force "end" function of that animation (it was not ended correctly, probably because of events).

Ext.override(Ext.MessageBox, {    
    hide:  function() {
        if (this.activeAnimation && this.activeAnimation._onEnd) {
            this.activeAnimation._onEnd();
        }
        return this.callParent(arguments);
    }
});

[daxiang28]

FWIW, I was getting errors with 2.3.1 using Ext.override (might be b/c it's deprecated) and ended up with this:

Ext.apply(Ext.MessageBox, {
    hide:  function() {
        if (this.activeAnimation && this.activeAnimation._onEnd) {
            this.activeAnimation._onEnd();
        }
        return this.callParent(arguments);
    }
});

Steve

[sing]

It still occurs in Touch 2.3.2...

[mattkim]

I'm having the same issue too

[JustAndrei]

Here is my fix. The idea is simple: if the animation does not fire the end event, the cleanup code gets called anyway by the timer, in 50 ms + animation duration.

Ext.Component.prototype.animateFn = // or Ext.override( Ext.Component, { animateFn:
    function (animation, component, newState, oldState, options, controller) {
        var me = this;
        if (animation && (!newState || (newState && this.isPainted()))) {


            this.activeAnimation = new Ext.fx.Animation(animation);
            this.activeAnimation.setElement(component.element);


            if (!Ext.isEmpty(newState)) {
                var onEndInvoked = false;
                var onEnd = function () {
                    if (!onEndInvoked) {
                        onEndInvoked = true;
                        me.activeAnimation = null;
                        controller.resume();
                    }
                };


                this.activeAnimation.setOnEnd(onEnd);
                window.setTimeout(onEnd, 50 + (this.activeAnimation.getDuration() || 500));


                controller.pause();
            }


            Ext.Animator.run(me.activeAnimation);
        }
    };

[lovelyhibabe]

Here is the fix, this might be an issue with css3 prefix.

Modify the file touch/src/fx/runner/CssTransition.js?and change function 'onTransitionEnd' to:

onTransitionEnd: function(e) {
    var target = e.target,
        id = target.id,
        propertyName = e.browserEvent.propertyName,
        styleDashPrefix = Ext.browser.getStyleDashPrefix();


    if (id && this.runningAnimationsData.hasOwnProperty(id)) {
        if (Ext.feature.has.CssTransformNoPrefix) {
            if (propertyName.indexOf(styleDashPrefix) >= 0) {
                propertyName = propertyName.substring(styleDashPrefix.length);
            }
        }
        this.refreshRunningAnimationsData(Ext.get(target), [e.browserEvent.propertyName]);
    }
}

[hashan41]

It occurred for me in several times in Google chrome and Android 4.2.1 Jellybeans native browser,

Replace this code in Component.js hide function or override it.

hide: function(animation) {
            this.setCurrentAlignmentInfo(null);
            //patch for message box issue by hashan jayakody
            /*
            if (this.activeAnimation) {
                this.activeAnimation.on({
                    animationend: function() {
                        this.hide(animation);
                    },
                    scope: this,
                    single: true
                });
                this.setHidden(true);
                return this;
            }
            */
            if (!this.getHidden()) {
                if (animation === undefined || (animation && animation.isComponent)) {
                    animation = this.getHideAnimation();
                }
                if (animation) {
                    if (animation === true) {
                        animation = 'fadeOut';
                    }
                    this.onBefore({
                        hiddenchange: 'animateFn',
                        scope: this,
                        single: true,
                        args: [animation]
                    });
                }
                this.setHidden(true);
            }
            return this;
        }, 

Hope this help to solve this bug and save time. This is my first post in here and I am big lover of this framework.

Thanks,

[DonM]

I went with JustAndrei's fix, and it seems to work great. Thanks for all the suggested fixes everyone.

EDIT: JustAndrei's fix has an issue with selectfields on tables occassionally. The easiest thing to do for now is disable the showAnimation for Ext.Msg like this:

Ext.Msg.defaultAllowedConfig.showAnimation = false;

I just put it in launch() in app.js and everything appears to be working now.