extjs triggerfield doesn't fire blur

Question

Update: I tried a suggestion by @newmount however, if I call fireEvent('blur') then the focus of the trigger isn't fired by any keyboard action. (It resumes once there is a mouse click)

---

To be honest the triggerfield doesn't fire blur in a certain situation.

From within the focus event if I have a reference to another field and do field.focus() the blur of the current field doesn't fire. What's worse is it fires later if I click anywhere else.

Below is code and steps to reproduce:

Ext.onReady(function() {

  Ext.define('Ext.ux.CustomTrigger', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.customtrigger',
    labelStyle: 'white-space: nowrap',
    initComponent : function() {
        this.on("focus", function() {
            console.log("Trigger focused");
            //the problem point.
            //I do some processing here and then 
            //in some case I do the following:
            Ext.getCmp('some_field').focus();
            //when this is called the BLUR of this trigger field isn't fired.
        });
        this.on("blur", function() {
            console.log("Trigger blurred");
        });
        this.callParent();
    }
  });
//end of onReady 
});

Here is a live fiddle : http://jsfiddle.net/sq37s/

To Reproduce:

• Click into the first name field
• Hit tab, it will jump into the trigger and then jump into the mid init field.
• The console at this point will not show a Trigger blurred
• Now click anywhere in the panel and you'll see Trigger blurred.

This behavior is causing some very unexpected issues in our application, this is something so trivial we based assumptions on the fact that something like this will work.

I would love:

• Any suggestions to work around this, perhaps pure javascript
• Any hope of getting the extjs guys to fix this?

Answer 1

When the focus gets changed programmatically, the event may not get fired (think events gets fired only on user-action). One workaround is to fire that event programmatically while changing focus

this.on("focus", function(e) {
    console.log("Trigger focused");
    if (someConditionToChangeFocus){
        e.fireEvent('blur'); //Fires the blur event
        Ext.getCmp('some_field').focus();
    }
});

[Edit]

Another approach is to use FocusManager's beforecomponentfocus event, fiddle here: https://fiddle.sencha.com/#fiddle/3mq