Tab is activated when close button clicked

[JorisA]

See Tabs Example 2.
When you close tab that is not the active one, it will be activated before its closed.

stopEvent() should prevent the tab from receiving the click event. but somehow this doesnt work I think.

    /** @private */
    closeClick : function(e){
        var o = {};
        e.stopEvent();
        this.fireEvent("beforeclose", this, o);
        if(o.cancel !== true){
            this.tabPanel.removeTab(this.id);
        }
    } 

[jack.slocum]

I don't see this behavior. The click event for the close icon would fire first (even if it bubbles) and it removes the tab.

[JorisA]

Hm I really do, try holding your mouse button for a sec when clicking the close button.

[mystix]

yeah tried holding the mouse button and it does what u say.

however.... if you press and hold down your mouse button, is it still considered a click?

[Animal]

Ahah! That would be a mousedown which goes through this code:

    onTabMouseDown : function(e){
        e.preventDefault();
        this.tabPanel.activate(this.id);
    },

Perhaps that could check the target, and only activate if the original target was not the close button.

[JorisA]

I guess your totally right
Nice one.

[Animal]

Try adding this code after including ext-all.js:

Ext.override(Ext.TabPanelItem, {
    onTabMouseDown : function(e){
        e.preventDefault();
        if (!e.getTarget().hasClass("close-icon")) {
            this.tabPanel.activate(this.id);
        }
    }
});

[JorisA]

Error: e.getTarget().hasClass is not a function
Still works since the tab is activated onclick. but no longer on mousedown.

Maybe you mean getTarget(false, false, true) (return a Ext.Element object instead of DOM node).

But... this doesnt seem to work eather, I guess this is due to another bug in EventObject: It never returns a Ext.Element

        getTarget : function(selector, maxDepth, returnEl){
            return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : this.target;
        } 

shoulnt this be something like

Ext.override(Ext.EventObject, {
    getTarget : function(selector, maxDepth, returnEl){
        if(selector) {
            return Ext.fly(this.target).findParent(selector, maxDepth, returnEl);
        }
        else {
            return returnEl ? Ext.get(this.target) : this.target;
        }
    }
}); 

[Animal]

This works:

Ext.override(Ext.TabPanelItem, {
    onTabMouseDown : function(e){
        e.preventDefault();
        var t = Ext.get(e.getTarget());
        if (!t.hasClass("close-icon")) {
            this.tabPanel.activate(this.id);
        }
    }
});

[JorisA]

It does thank you.
But isnt the other thing a bug as well?