Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    10
    Vote Rating
    1
    dlamee is on a distinguished road

      0  

    Default Focus Jumps Twice on Tab (Firefox)

    Focus Jumps Twice on Tab (Firefox)


    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:

    Code:
    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:

    Code:
    {
         "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

    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    10
    Vote Rating
    1
    dlamee is on a distinguished road

      0  

    Default


    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.

  4. #4
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    10
    Vote Rating
    1
    dlamee is on a distinguished road

      0  

    Default


    Bump.

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

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,018
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!