Combo doesn't blur when manually shifting focus

Question

I have a combo box that's rigged to do shift focus to another form element immediately after the user has selected a value, with this config:

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 'input-name' form field receives focus, and I can start typing in it, but the combo field is never blurred. It still has the 'x-form-focus' style, and the 'blur' event is never fired. Only when I use the mouse to click another field, the combo is blurred.

Does anyone know what's going on, and how I can circumvent this?

score 2 · Accepted Answer · answered Dec 29 '11 at 10:10

This is how I solved it:

listeners: {
    select: function( a, record ) {
        if ( typeof( record ) == 'undefined' ) {
            return;
        }

        /**
         * There's 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();
        }
    }
},

score 0 · Answer 2 · answered Dec 28 '11 at 17:19

When any piece of code gets executed as the a part of an event and that resulted in some other event to fire, then the new event doesn't get fired. onBlur should be executed only when a user performs some action in the UI because of which the combo box looses focus, rather than field loosing focus programmatically.

Combo doesn't blur when manually shifting focus

2 Answers2