stopEvent fails to prevent blur when custom trigger field is invalid.

[dlamee]

REQUIRED INFORMATION

Ext version tested:

• Ext 4.1.1 rev RC2
• Ext 4.1
• Ext 4

Browser versions tested against:

• Chrome 19
• IE 9
• FF 13 (Firebug 1.9.2b2 installed)
• Safari 5.1.7

DOCTYPE tested against:

• HTML 5

Description:

• We have a custom trigger control that peforms validation via asynchronous Ajax request on blur. If the field is valid, the focus changes to the new field. If the field is invalid, however, we do not want the focus to change.
• When tabbing in FF, the focus moves to the next field, ignoring the stopEvent call.

Steps to reproduce the problem:

• Type any value in the Trigger field and press tab.

The result that was expected:

• The focus should stay in the Trigger field.

The result that occurs instead:

• The focus moves to the next field.
• Again, this is a Firefox-ONLY issue.

Test Case:

Ext.require([        
        'Ext.form.*',
        'Ext.button.Button',
        'Ext.Ajax'
]);
    
Ext.define('Test.CustomTrigger', {
        extend: 'Ext.form.field.Trigger',
        alias: 'widget.customtrigger',
        
        initComponent : function() {
            var me = this;
    
            Ext.apply(me, {
                validator: me.onValidate,
                enableKeyEvents: true
            });
            
            me.callParent();
        },
        
        checkTab: function(me, e) {
            if (!this.ignoreMonitorTab && e.getKey() == e.TAB) {
                if (!me.isValid()) {
                    e.stopEvent();
                    return;
                }
                me.triggerBlur();
            }
        },
        
        validateBlur: function(e) {
            var me = this,
                value = me.getValue(),
                valid = true;
            
            if (!me.isValid()) {
                valid = false;
                console.log('field is invalid');
                me.focus();
            }
            return valid;
        },
        
        onValidate: function(value) {
            var responseData;
            
            Ext.Ajax.request({
                    url: 'data.json',
                    async: false,
                    success: function(response){
                        responseData =  Ext.decode(response.responseText);
                    }
                });
            
            if (responseData.valid === true) {
                return true;
            } else {
                return 'Invalid value';
            }
        }
    });
    
    Ext.onReady(function() {
        var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
        
        var form = Ext.widget({
            xtype: 'form',
            layout: 'form',
            collapsible: true,
            id: 'simpleForm',
            url: 'save-form.php',
            frame: true,
            title: 'Simple Form',
            bodyPadding: '5 5 0',
            width: 500,
            fieldDefaults: {
                msgTarget: 'side',
                labelWidth: 75,
                validateOnBlur: true
            },
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'First Name',
                afterLabelTextTpl: required,
                name: 'first',
                allowBlank:false
            },{
                fieldLabel: 'Last Name',
                afterLabelTextTpl: required,
                name: 'last'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                afterLabelTextTpl: required,
                name: 'email',
                vtype:'email'
            }, {
                fieldLabel: 'Trigger',
                name: 'trigger',
                xtype: 'customtrigger',
                afterLabelTextTpl: required,
                allowBlank: false,
                validateOnBlur: false,
                validateOnChange: false
            }, {
                fieldLabel: 'Age',
                name: 'age',
                xtype: 'numberfield',
                minValue: 0,
                maxValue: 100
            }, {
                xtype: 'timefield',
                fieldLabel: 'Time',
                name: 'time',
                minValue: '8:00am',
                maxValue: '6:00pm'
            }],


            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });


        form.render(document.body);
    });

Content of Ajax response:

{
     "valid": false
}

HELPFUL INFORMATION
Operating System:

• Win7 Enterprise