Clicking on iFrame does not blur Ext Combobox

Question

I have a page with Ext.form.ComboBox and TinyMCE Editor that uses an iframe for its body. The problem is that when the ComboBox has focus and the user clicks on the iframe, the ComboBox blur event does not fire. If the user clicks on the ComboBox, the focus event also fails. However, document.activeElement correctly changes to iframe and back to ComboBox. Has anyone else had this problem or was aware of a fix / workaround for it?

Answer 1

Does the editor describe a focal event that you can handle? You can call combo.blur()manually if you can find out when this event was supposed to happen. If you can say that activeElement is changed, you should be able to manually blur combos from the same code.

Answer 2

        setTimeout(function(){
            if($('#yourIframeID')){
                $('#yourIframeID')[0].contentWindow.document.body.onfocus = function(){
                    if(Ext.getCmp('yourComboBoxID')){
                        if(Ext.getCmp('yourComboBoxID').isExpanded){
                            Ext.getCmp('yourComboBoxID').collapse()
                        }
                    }

                }
            }
        },500);

I had the same problem and I thought it would be much harder to get it to work, but this is what I used. You should put this in a function and set this function in tinyMCE.init () configuration as

oninit : yourFunctionName

And we need setTimeout (), because in chrome (and probably in other browsers except Firefox), because it fires before the iframe is displayed. I tried with 0 timeout but did not work.