Not Able set the focus back to the field while firing OnBlur Event in firefox

**raghavan0208** · 12 Jan 2012 6:09 AM

Ext version tested:

Ext 4.0.7

Browser versions tested against:

Not Working for any version of Firefox
Working For all version of Chrome , IE

Description:

Firing OnBlur Event in Firefox Causes Problem.

Steps to reproduce the problem:

Create Ext.form.field.Text and give "Blur" listener after that write a function for some validation and try to set focus for the field if the validation fails.

The result that was expected:

After validation the focus should return to the corresponding field(Object) if the validation fails.

The result that occurs instead:

The focus is going to the nextfield eventhough validation fails and even after explicitly setting the focus by document.getElementById(object.inputId).focus()

Test Case:

<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>

<script>
Ext.onReady(function(){

Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
id:'fld1',
inputId:'nameFld',
fieldLabel: 'Name',
listeners:{
blur:function(obj){

navigationOnTab(obj);

}

}
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
inputId:'nameFld',
id:'fld2',
listeners:{
blur:function(obj){

navigationOnTab(obj);

}

}

},{
xtype: 'textfield',
name: 'add',
fieldLabel: 'Address',
inputId:'addrFld',
id:'fld3',
listeners:{
blur:function(obj){

navigationOnTab(obj);

}

}

},{
xtype: 'textfield',
name: 'addr1',
fieldLabel: 'Address1',
inputId:'addr1Fld',
id:'fld4',
listeners:{
blur:function(obj){

navigationOnTab(obj);

}

}

},{
xtype: 'textfield',
name: 'addr2',
fieldLabel: 'Address2',
inputId:'addr2Fld',
id:'fld5',
listeners:{
blur:function(obj){

navigationOnTab(obj);

}

}

}]
});

function navigationOnTab(obj){

if(obj.value===undefined || obj.value===null || obj.value=="" ){

document.getElementById(obj.inputId).focus();

}

}
});
</script>
</body>
</html>

**hendricd** · 12 Jan 2012 7:12 AM

@raghavan0208--

Have you tried:

Code:

obj.focus(false, true);

The last argument (delay = true) would ensure the focus attempt was not made before the blur event chain had completed.

**raghavan0208** · 17 Jan 2012 11:16 PM

I have tried your suggestion but the focus issue have not been resolved.

Thanks for the reply, if you find any other solution please tell me

Thanks,
raghavan0208

**hendricd** · 18 Jan 2012 4:29 AM

Originally Posted by raghavan0208

I have tried your suggestion but the focus issue have not been resolved.

Thanks for the reply, if you find any other solution please tell me

Thanks,
raghavan0208

@raghavan--

The default delay value for focus is 10ms. Adjust it upwards until you find a delay that suites your validation workload:

Code:

obj.focus(false, 300);

**raghavan0208** · 20 Jan 2012 4:32 AM

This time also no luck .
I have tried this suggestion, Are you suggesting the solution or is it working for you by reproducing the mentioned scenario.

Thanks,
raghavan0208

**hendricd** · 20 Jan 2012 5:11 AM

A suggestion at this point.

I've had good luck with the same pattern in scenarios where you are forcing one DOM event from within the handler of another.

Deferring the final action permits the initiator time to complete.

**Animal** · 21 Jan 2012 9:08 AM

Try this: http://docs.sencha.com/ext-js/4-0/#!...-cfg-validator

Not Able set the focus back to the field while firing OnBlur Event in firefox

Thread Tools

Search Thread

Display

Not Able set the focus back to the field while firing OnBlur Event in firefox

Not Able set the focus back to the field while firing OnBlur Event in firefox

Tags for this Thread