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

[mitchellsimoens]

This works on my FF13 for Mac. I typed 'text' in the Trigger field and tabbed and it kept focus on the Trigger field and marked it as invalid.

[austinrh]

Just tested on Firefox for Windows and this IS an issue.

[evant]

I can reproduce this on Windows, but without researching I'm not really sure if there's a great deal we can do with it, will need to look into it further.

[evant]

Yeah, looks like it's a FF bug, it seems as though it will fire the focus regardless:

function createField(id) {
    var field = document.createElement('input');
    field.type = 'text';
    field.id = id;
    field.name = name;
    document.body.appendChild(field);
    return field;
}

document.addEventListener('DOMContentLoaded', function(){
    
    var f1 = createField('f1'),
        f2 = createField('f2');
    
    f1.addEventListener('keydown', function(e){
        if (e.keyCode === 9) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'data.json', false);
            xhr.send(null);
            if (xhr.responseText == 'fail') {
                e.preventDefault();
            }
            xhr = null;
        }
    }, false);
        
});

There's an existing issue: https://bugzilla.mozilla.org/show_bug.cgi?id=489375

I'll bump it with my test case.

[dlamee]

Thank you!