Ext JS - Focus on a textfield does not work with render listener in IE

Question

I currently have an issue with Internet Explorer where when rendering a textfield on a page, focusing on that element does not work as it should.

In Chrome, when I focus on that text field and enter a shortcut to search (F2) it searches the grid. However this functionality does not work in IE. Could anyone suggest a reason why or an alternative way that will work in all browsers? I cannot use the KeyMap component as it causes glitch issues with our screen.

The code I am using for the shortcut is below:

    xtype : textField,
    fieldLabel : 'Name',
    id : 'customerNameSearch',
    name : 'customerNameSearch',
    listeners : {
       render: function (field) {
          field.focus(); 
          field.el.dom.onkeydown = function (event) {
          if(event.code == "F2") {
             performGridSearch(name)
          }                         
       }
    }

The above code triggers searches in the grid in Chrome, but for some reason not IE.

Answer 1

You could use ExtJS to listen for the keydown event and test for the F2 key in the event handler using e.getKey() or e.getKeyName() . The listener would look like:

keydown: function (item, e) {
            if (e.getKey() === e.self.F2)
               alert(e.getKeyName());
         }

This should work in all browsers supported by ExtJS including IE. Remember to set enableKeyEvents: true on the textfield.

Here is a fiddle that works in Chrome and IE11.