Make ExtJS input field lose focus

Question

I have a numberfield input which I want to lose focus when the user hits the enter key.

Here's the current config:

{
  xtype: 'numberfield',
  minValue: 0,
  maxValue: 99999,
  hideTrigger: true,
  keyNavEnabled: false,
  mouseWheelEnabled: false,
  enableKeyEvents: true,

  listeners: {
    specialkey: function(f, e) {
      if (e.getKey() == e.ENTER)
        f.blur();
    }
  }
}

The specialkey handler works, calling blur() as expected, but the only result is that the caret disappears from the input (indicating that the DOM text input element has been blurred). The field still has all the x-form-focus etc css classes, and examining the object shows that the private hasFocus property is still true.

Any suggestions?

I have tried calling f.onBlur() explicitly after the blur() call, but it made no difference.

(btw the field does not belong to a form so there is no form to submit.)

What about focusing another component? Even its parent container... — VoidMain
If you call f.up().focus(); it doesn't make f lose its focused class? — VoidMain
Quick question: Are you calling f.up().focus() alone or are you calling f.blur() before? local testing shows that, if i call f.blur() the call to f.up().focus() its, somehow, ignored... — VoidMain
@VoidMain focus() alone, but trying both gives the same result — Rob Agar

Reimius Reimius · Accepted Answer · 2013-03-07T17:36:25

The fix. The issue is caused by a weird behavior in the Ext.form.field.Trigger class where they don't trigger 'triggerBlur()' when the regular 'blur()' function is called. Very interesting:

listeners: {
    specialkey: function(f, e) {
        if (e.getKey() == e.ENTER)
        {
            f.triggerBlur();
            f.blur();
        }
    }
}

Make ExtJS input field lose focus

2 Answers