Focus Jumps Twice on Tab (Firefox)

[dlamee]

REQUIRED INFORMATION
Ext version tested:

• Ext 4.1.1
• Ext 4.x
  

Browser versions tested against:

• Chrome 19
• IE9
• FF13 (firebug 1.9.2b2 installed)
• Safari 5.1.7

DOCTYPE tested against:

• HTML 5

Description:

• We have a custom trigger control that performs validation via asynchronous Ajax request on blur. A valid value is entered and Tab key is pressed.
  
• The request is made and field is validated. In Firefox, focus is now on field two fields below the current field and both the next field and the field that has focus appear to have focus (the focus highlight has been applied). In other browsers, focus is on the next field, which is correct.

Steps to reproduce the problem:

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

The result that was expected:

• The field after the trigger field should have focus (Age field in the Test Case).

The result that occurs instead:

• Focus is on the 2nd field after the trigger field (Time field in the Test Case).

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;
            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);
});

Ajax Response:

{
     "valid": true
}

HELPFUL INFORMATION

Screenshot or Video:

form.png
Tab has been pressed, note focus caret and Age and Time borders.

Operating System:

• Win 7 Enterprise

[mitchellsimoens]

On my FF13 it works as expected.

I wouldn't use a sync request though. I would mark the field as invalid with an error message and when the ajax request returns then either clear it or mark it with a new error message. Also have the save button with formBind set to true so you can't submit the form if the form is invalid.

[dlamee]

First, I should have specified I was using Firefox for Windows and it's been duplicated by myself and a team mate.

As far as sync vs async, we'd love to use an async request but several fields on our "forms" may be dependent on the field we're validating so it would force us into a chain scenario which would be complex, kludgy and potentially problematic.

Lastly, the code sample attached is just that, code based on an Ext sample for illustration purposes only.

[dlamee]

Bump.

Please see my last post. My team IS able to reproduce this in Firefox for Windows, please take a look at this again.

[evant]

I can't reproduce it exactly on FF14, it jumps to the next field, whereas the other browsers all stay on the same field. It's almost certainly the same FF bug that you posted previously: http://www.sencha.com/forum/showthread.php?226262