[4.1.0] The button retains the focused state after disabling and enabling

[Qtx]

REQUIRED INFORMATION


Ext version tested:

• Ext 4.1.0

Browser versions tested against:

Problem occurs:

• IE 9.0.8112.16421
• FF 12.0, firebug 1.9.1

Problem does not occur:

• Opera 11.62
• Chrome 18
• Safari 5.1.5

Description:

• The button retains the focused state after disabling and subsequent enabling.
• Often, a button fires an action, which should disable all buttons including this button until it completes.

Steps to reproduce the problem:

• Use the demo example menu.js
• Add a button, which will disable itself for a couple of seconds, enable it through setTimeout
• Run the example
• Push the button and take the cusrsor away, after the button is enabled it retains the focused state

The result that was expected:

• The focused state should be removed

The result that occurs instead:

• The focused state is retained

HELPFUL INFORMATION

Debugging already done:

• yes

Possible fix:

This override shows what should be added to the original method Button.disable().

Ext.override(Ext.button.Button, {

    disable: function(silent) {
        var me = this;

        me.callParent(arguments);

        if (me.btnEl) {
            me.btnEl.dom.disabled = true;
        }
        me.addClsWithUI('disabled');
        me.removeClsWithUI(me.overCls);
        
        var targetEl = me.getEl();
        if (me.focusCls && targetEl) {
            targetEl.removeCls(me.removeClsWithUI(me.focusCls, true));
        }

        // IE renders disabled text by layering gray text on top of white text, offset by 1 pixel. Normally this is fine
        // but in some circumstances (such as using formBind) it gets confused and renders them side by side instead.
        if (me.btnInnerEl && (Ext.isIE6 || Ext.isIE7)) {
            me.btnInnerEl.repaint();
        }

        return me;
    }
    
}); // Ext.button.Button

Additional CSS used:

• only default ext-all.css

Operating System:

• Windows 7

[evant]

Can you post a test case? I wasn't able to reproduce this:

Ext.require('Ext.picker.Color');
Ext.onReady(function() {
    
    var btn = Ext.create('Ext.button.Button', {
        renderTo: document.body,
        text: 'Foo',
        handler: function(btn) {
            btn.disable();
            setTimeout(function(){
                btn.enable();
            }, 1000);
        }
    });
    
});

I click the button and move my mouse away, when the button enables there is no focusCls applied.

[Qtx]

Hi,

I place the example here

http://www.point-constructor.com/ext...enu/menus.html

I have just used the example menus.html and added the button Test which disables itself for 2 seconds. After enabling, the button has the highlighted style, which does not go away anymore.

After enabling the button should be just normal as before disabling.extm.jpg

[lmalgras]

Here is a manual test case for this bug : http://jsfiddle.net/DRg37/

All focus related class are not removed from the button dom element when it is disabled.

[evant]

I'm still not following, am I doing something wrong here?

http://screencast.com/t/OOxUsxznD9o

[Qtx]

I seems to have problems only in the Firefox and IE. Opera, Chrome and Safari are OK.

Sorry for not precise information!

[lmalgras]

Qtx is right. I reproduce this bug only on Firefox and on Internet Explorer.

[lmalgras]

This bug is fixed since Ext JS 4.1.1
Thank you