Combobox focus() issue

[caleywoods]

I have some code in a button handler that sets the focus to a combobox when clicked. When you click the button it correctly places the cursor inside the combobox which is configured to allow typing in the box.

When you TAB to the button and hit Enter on the keyboard, focus is set to the trigger of the dropdown and and you cannot type in the combobox since your cursor isn't placed in it. If you TAB to the button and hit space it works just as click does and places your cursor inside the combobox, ready to type.

I did a console.log on the event that happens when you click and hit Enter and it appears that an event of type "click" is fired when you hit Space or click the button but when you hit Enter it fires an event of type "keydown".

I tried to create a JSFiddle to illustrate this but every version of ExtJS I've tried on JSFiddle fires the click even for any kind of activation of the button (click mouse, hit Space, hit Enter).

Has anyone ever see this? I need to allow the user to hit Enter on the keyboard and have the cursor placed within the combobox for typing.

[sword-it]

Hi,

try following code:



var form = Ext.create('Ext.form.Panel', {
title: 'Simple Display',
autoHeight:true,
renderTo: Ext.getBody(),
items:[{
xtype:"combo",
store:['abc','xyz']
, name:'a'
},
{
xtype:'button'
, text:'click'
, listeners:{
click:{
fn:function(btn,e){
if(e.ENTER=13){
form.getForm().findField("a").focus();
}
}
}
}
},
]

});

[caleywoods]

Hi,

try following code:



var form = Ext.create('Ext.form.Panel', {
title: 'Simple Display',
autoHeight:true,
renderTo: Ext.getBody(),
items:[{
xtype:"combo",
store:['abc','xyz']
, name:'a'
},
{
xtype:'button'
, text:'click'
, listeners:{
click:{
fn:function(btn,e){
if(e.ENTER=13){
form.getForm().findField("a").focus();
}
}
}
}
},
]

});



In your code within the click event you're assigning ENTER to the event with value 13. I adjusted it to a comparison and within JSFiddle it works fine. Here is the JSFiddle: http://jsfiddle.net/nFYxu/ I'm not actually sure why it works since if you console.log() the event it has no property called Enter, I'd assume it needs compared to charCode.

In my code however it doesn't work since the Enter key isn't firing the click event.

Edit: The click event IS being fired and I am evaluating whether e.getKey() is equal to e.ENTER and it's coming back true. Within the if statement I'm saying to set focus to my element but it doesn't work when you hit the enter key. It logs out "true" and then my console.log('inside ENTER check') but the focus isn't set on my element.

[caleywoods]

Here is my current button code:


text : 'Add',
id : 'invoice_add_line_button',
listeners : {
click : {
fn: function( btn, evt ) {
console.log( evt.getKey() === evt.ENTER ); //returns true
if ( evt.getKey() === evt.ENTER ) {
console.log( 'inside Enter if' );
//this.onCreate();
//focus to form element
}
}
}
}


What happens is you TAB to the button and hit Enter on the keyboard and you see this in the console:

true
inside Enter if

but the focus is not set to the element.

[tvanzoelen]

Strange in Chrome it works fine, when I tried Ie the first time it was broke. After ctrl-r it worked.

[caleywoods]

I'm testing it in Chrome Canary. I'll give Chrome Stable a try.

[tvanzoelen]

IE worked after that ctrl-r. Can be a fiddler thing

[caleywoods]

In my code when you hit enter it sets focus to the element but it focuses on the drop down arrow and doesn't place the cursor within the combobox.