Clicking on iFrame does not blur Ext Combobox

I have a page with a Ext.form.ComboBox and a TinyMCE Editor, which uses an iframe for its body. The problem is that when the ComboBox has focus and the user clicks on the iframe, the ComboBox's blur event is not fired. If the user clicks back to the ComboBox, the focus event is also not fired. However, document.activeElement开发者_如何学编程 does change to the iframe and back to the ComboBox correctly. Has anyone else had this problem or know of a fix/workaround for it?

Does the editor fire a focus event that you can handle? You can call combo.blur() manually if you can figure out when that event should have happened. If you are able to tell that the activeElement changed, you should be able to manually blur the combo from the same code.

        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 exact same problem and I thought that it'll be a lot harder to make it work, but that's what I used. You have to put this in a function and set that function in the tinyMCE.init() config as

oninit : yourFunctionName

And we need setTimeout() because in chrome (and probably in other browsers except Firefox) because it fires before the iframe is rendered. I tried with 0 timeout but didn't work.