Combo does not blur when switching manually

Question

I have a combo box that is configured to transfer focus to another form element right after the user selects a value with this configuration:

new Ext.form.ComboBox({ // ... listeners: { select: function( a, record ) { if ( typeof( record ) == 'undefined' ) { return; } if ( !Ext.getCmp('input-name').getValue() ) { Ext.getCmp('input-name').focus(); } }, blur: function() { console.log('blurred'); }, render: function( field ) { if ( !config.activity ) { field.onTriggerClick(); } } }, // ... }); 

However, a strange thing happens. The name-name field gets focus, and I can start typing it, but the combo field will never be blurred. It still has an x-form-focus style, and the blur event never fires. Only when I use the mouse to click another field, the combo is fuzzy.

Does anyone know what is happening and how can I get around this?

Answer 1

Here's how I solved it:

 listeners: { select: function( a, record ) { if ( typeof( record ) == 'undefined' ) { return; } /** * There some weird stuff going on in the combo control, that causes it not to blur when shifting focus, * so we have to do it manually. This action has to be deferred, because the control is going to refocus * itself at the end of the function firing this event (onViewClick()). */ this.moveFocus.defer( 100, this ); }, render: function( field ) { field.moveFocus = function() { if ( !Ext.getCmp('input-name').getValue() ) { Ext.getCmp('input-name').focus(); this.triggerBlur(); } }; if ( !config.activity ) { field.onTriggerClick(); } } }, 

Answer 2

When a piece of code is triggered as part of an event and which leads to the occurrence of some other event, the new event is not triggered. onBlur should be performed only when the user performs some action in the user interface, due to which the combo field loses focus, and not the field, losing focus programmatically.