[FireFox 53 with ExtJs 6.2, 6.5] FF focus problems on floating iframes

[tvanzoelen]

In FireFox 53 we encounter some focus problems with floating iframes.

See fiddle where I have created an html - iframe - picker:

https://fiddle.sencha.com/#view/editor&fiddle/216l

When clicking the tricker button, the picker shows up fine in Chrome but in FF the picker immediately collapses because onFocusLeave is hit in the Ext.grid.CellEditor plugin when the iframe document gets the focus.

This is probably caused in the class Ext.event.publisher.Focus (I checked Ext6.2.1 version) . There is a piece of code in it, triggered when focusin and focusout events are not supported.

See snippet:

 if (!Ext.supports.FocusinFocusoutEvents) {
        // When focusin/focusout are not available we capture focus event instead, 
        // and fire both focusenter *and* focusleave in the focus handler. 
        this.override({
            handledDomEvents: ['focus', 'blur'],
            
            publishDelegatedDomEvent: function(e) {
                var me = this,
                    targetIsElement;
                
                me.callSuper([e]);
 
                // We need to know if event target was an element or (window || document) 
                targetIsElement = e.target !== window && e.target !== document;  // <--- will get false when iFrame is hit
 
                // There might be an upcoming focus event, but if none happens 
                // within a minimal timeout, then we treat this as a focus of the body 
                if (e.type === 'blur') {
                    if (!targetIsElement) {
                        // Apparently when focus goes outside of the document, Firefox 
                        // will fire blur on the currently focused element, then on the document, 
                        // then on the window. Interestingly enough, both follow-up blur events 
                        // will have explicitOriginalTarget pointing at the previously focused 
                        // element; when that happens we can be reasonably sure that focus 
                        // indeed goes out the window. 
                        if (e.explicitOriginalTarget === Focus.previousActiveElement) {
                            // But we want that to fire only once, so process window blur 
                            // which happens last. 
                            if (e.target === window) {
                                clearTimeout(focusTimeout);
                                focusTimeout = 0;
                                me.processFocusIn(e, Focus.previousActiveElement, document.body);
                                Focus.previousActiveElement = null;
                            }
                        }
                    }

targetIsElement will get false when the iframe is hit.

  targetIsElement = e.target !== window && e.target !== document;

Then me.processFocusIn(e, e.target, document.body) is called instead of me.processFocusIn(e, Focus.previousActiveElement, document.body);
causing the picker to collapse (I guess).

While this part of code is hard to override, could you filter out the floating iFrames in this handler?

Also in IE11 we experience some problems. On the first trigger click the picker immediately collapses - the next clicks are fine.

[tvanzoelen]

*bump*

[hakimio]

Html editor can not be used as cell editor. That's what the documentation states:

Note: The Ext.form.field.HtmlEditor field is not a supported editor field type.

editor config

[tvanzoelen]

That is not the case. Ext.form.field.Picker is used as editor. The Ext.form.field.HtmlEditor is its floating picker. Nothing mentioned about that.

Works fine in Chrome!

[pmiklashevich]

The issue is still relevant for FF55 with Ext 6.5.1
Any updates?

[pmiklashevich]

BUMP: still not fixed in 6.6.0