Focus and Blur events not working in IE 9 with 4.1.3 version

[avcmc]

Below is a test case in which the code is doing the following thing:

1. There is button - Click Me - which opens a window

2. Window has a form containing two text fields

3. Afterrender event of window sets the focus at the first field of form

4. Focus, Blur listeners are associated with the first field of form which print statemtns to console.

Issue:

The issue is that when the window is closed and then re-opened for the second time then the focus and blur events don't fire.

How to reproduce:

1. Open the window

2. Focus will itself get set in the first field

3. Statments will be printed in console

4. Close the window

5. Open the window again

6. Though, focus gets set to the first field, but focus event doesn't get fired as nothing gets printed to console

7. Close window and open again - same behavior shown that neither focus nor blur is fired

8. Refresh the entire page and now open the window - focus and blur now fire but only for one time

Browsers tested:

IE9 (with Browser and Document mode set to Standards)

    Ext.onReady(function(){                
        function getForm(){
            var form    =    {
                xtype:'form',
                width:550,
                items:[
                    {
                        xtype:'textfield',
                        flex:1,
                        fieldLabel:'test1',
                        id:'disabledFieldId',
                        listeners:{
                            focus:function(){
                                console.log('focus first field');
                            },
                            blur:function(){
                                console.log('blur first field');
                            },
                            change:function(){
                                console.log('focus first field');
                            }
                        }
                    },
                    {
                        xtype:'textfield',
                        flex:1,
                        fieldLabel:'test2'
                    }
                ],
                listeners:{
                    afterrender:function(){
                        Ext.getCmp('disabledFieldId').focus('', 100);
                    }
                }
            };
            return form;
        }
        Ext.create('Ext.Button', {
            text: 'Click me',
            renderTo: Ext.getBody(),
            handler: function() {
                var win        =        Ext.create('Ext.window.Window',{
                    modal:true,
                    items:[
                        getForm()
                    ],
                    width:550,
                    height:200
                });
                win.show();
            }
        });
    });

Is something wrong with the code or is this a bug?

Thanks for any help in advance.

PS: ExtJs version 4.1.3

[avcmc]

Any idea on this anyone?

[avcmc]

I checked this in older versions and its working fine in versions upto 4.1.1, that is, the listeners are getting called properly.

But in version 4.1.3 its just not working.

This is really proving to be a show-stopper for us.

Any thoughts on this anyone?

Thanks.

[avcmc]

Anyone from Sencha listening to this one?

Could this please be moved to bugs.

Looks like we shall have to downgrade to 4.1.1 from 4.1.3, which is again a struggle as few issues related to locking in a grid which were resolved in 4.1.3 would again come up in 4.1.1 - a complete turn-off.

[germanicus]

This has been fixed and will be available in 4.2. It's ticket number is EXTJSIV-7921.

This override will fix it:

Ext.define('Ext.overrides.form.field.Base', {    override: 'Ext.form.field.Base',

    applyRenderSelectors: function() {
        var me = this;

        me.callParent();

        // This is added here rather than defined in Ext.form.Labelable since inputEl isn't related to Labelable.
        // It's important to add inputEl to the childEls so it can be properly destroyed.
        me.addChildEls('inputEl');


        /**
         * @property {Ext.Element} inputEl
         * The input Element for this Field. Only available after the field has been rendered.
         */
        me.inputEl = me.el.getById(me.getInputId());
    }
});

[a_kanin]

Thank you!! i was having the same problem.