[UNKNOWN][3.0svn/2.3] Blur event interferes with click event in Firefox

[Tom23]

(Edit: actually, it's not the click event but the mousedown event that makes some trouble.)


This bug occurs in ExtJS 3.0.0 with Firefox 3.0 and Firefox 3.5.
No problem in the latest versions of IE, Opera and Safari. (Windows XP)

Steps to reproduce:

• Open http://www.extjs.com/deploy/dev/exam...formpanel.html
• Click one of the text fields
• Try and drag an item from the data grid, while the focus is still on the text field

Expected results:

• Text field should lose focus, and
• Dragging should start

Experienced results:

• Text field loses focus, but
• No dragging

Notes:

• In this scenario, Ext.dd.DragDrop.handleMouseDown() recieves a blur event instead of a click event
• This also happens when focus is on an Ext.Button
• Same problem in Ext 2.3 and in Ext 3.1 (SVN version per 12/12/09)

I guess the reason could be some problem with Ext.EventObjectImpl.setEvent()

[Tom23]

I guess the reason could be some problem with Ext.EventObjectImpl.setEvent()

It is indeed. This is what happens:
Ext.EventObject (singleton) is overwritten every time a new event handler is called.
Obviously, the blur and mousedown events are fired "at the very same time" in Firefox, so the EventObject is modified before it is even processed. Try this:

Ext.dd.DragDrop.prototype.init = function(id, sGroup, config) {
    this.initTarget(id, sGroup, config);
    Event.on(this.id, "mousedown", function(evt, d) {
        // evt is a reference to an Ext.EventObject
        console.log('calling handlemousedown with a ' + evt.type + ' event');
        // blur event jumping in at this point.
        // evt's properties are overwritten right now.
        this.handleMouseDown(evt, d);
    }, this);
    // Event.on(this.id, "selectstart", Event.preventDefault);
};

Ext.dd.DragDrop.prototype.handleMouseDown = function(e, oDD) {
    console.log('handleMouseDown received a ' + e.type + ' event');
...

You'll see that we got a race condition here.

Possible fix:
Maybe Ext.EventObject should not be a singleton. Or at least the setEvent() method should have some sort of caching mechanism. For blur events. In Firefox. I don't know.

edit:
quick'n'dirty hack

if (Ext.isGecko) {
    (function () {
        var blurEventObject;
        Ext.EventObject.setEvent = function (e) {
            if (e.type == 'blur') {
                blurEventObject = blurEventObject || new Ext.EventObjectImpl();
                return blurEventObject.setEvent.apply(blurEventObject, arguments);
            } else {
                return Ext.EventObjectImpl.prototype.setEvent.apply(this, arguments);
            }
        };
    })();
}

[okummer]

I ran into the same problem and this post confirmed that my preliminary analysis was not entirely off track. Thanks for sharing! I continued to look into the event handling and the full picture looks like this:

• Ext.grid.RowSelectionModel.handleMouseDown calls focusRow on the view, which calls focusCell, which eventually calls focus on the DOM element.
• The native implementation of focus synchronously fires a blur event.
• That event is handle by Ext JS, trashing the EventObject singleton.
• When the method handleMouseDown continues, it finds that the last event (a blur) is unable to start a drag and exits.

The funny thing is that in GridView.focusCell there is an explicit check that calls focus synchronously in Firefox, only. That explains why this bug only appear in Firefox. I am completely in the dark why a synchronous focus would be desirable for this and only this browser. Maybe someone from Sencha could enlighten us.

By the way, the bug persists in Ext JS 4 and is reproducible in the example you linked above.