Threaded View

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    10
    Vote Rating
    1
    dlamee is on a distinguished road

      0  

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

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


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

    Code:
    {
         "valid": false
    }


    HELPFUL INFORMATION
    Operating System:
    • Win7 Enterprise
    Last edited by dlamee; 25 Jun 2012 at 5:57 AM. Reason: Made a little more clear this is a Firefox only issue.