Results 1 to 4 of 4

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

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2009

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

    (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:

    Expected results:

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

    Experienced results:

    • Text field loses focus, but
    • No dragging


    • 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()

  2. #2
    Ext JS Premium Member
    Join Date
    Aug 2009


    Quote Originally Posted by Tom23 View Post
    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(, "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(, "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.

    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);

  3. #3
    Ext JS Premium Member
    Join Date
    Jan 2012

    Default Blur event interferes with click event in Firefox

    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.

  4. #4


    Anyone heard of this being fixed? I think I'm having the same issue with ExtJS 4.1. I tried the Tom23's quick'n dirty hack, but it didn't work for me.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts