Why is textfield id conflicting with listeners in IE in ExtJs 4.1.3?

Question

Our application uses ExtJs and in version 4.1.3 strange behavior is being shown in IE.

The issue is that if we open a window having a form with few textfields/combos, and if we reopen this window after closing it once, then the focus/blur listeners applied to textfield/combos stop working.

Following is a test case for the issue:

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

In the above test case, this issue can be checked through the following steps:

1. Load the page in IE and Click the button 'Open Window' to open the window

2. Click in the first textfield to focus at it, this will print a statment - "focus first field" - in console

3. Now close this window and then open it again from the button

4. Click in the first textfield - now, nothing will be printed to console - focus event will not fire at all.

I have checked and found that 'focus' and 'blur' events are not firing but 'change' event does fire everytime.

If we reload the entire page and then open the window now, then the events will start firing again. But in this case too, only for one time.

I found that if 'id' is commented from the textfield then things start working fine. But then this is strange. How is 'id' conflicting with the listeners? Is this a bug?

Note that there are no errors being thrown. Also, the window is getting destroyed and elements are getting recreated.

I tested this in Chrome and Firefox too and found this kind of behavior to be happening in IE only (checked in IE9 with document and browser mode set to Standards).

Also, when I tested this with versions upto 4.1.1, I found things to be working fine with IE too.

Any thoughts on this anyone?

Thanks for help in advance.

Answer 1

This finally has been accepted as a bug in version 4.1.2 and 4.1.3. The override which can solve it can be checked on this link.