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:
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:
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