[6.x.x] TabPanel event activate not fired for first added tab

[vadimv]

Happens from 6.5.2 to 6.6.0. Can find a test case in the following thread: https://www.sencha.com/forum/showthr...irst-added-tab

[mitchellsimoens]

This looks like the onAdd method of Ext.tab.Panel only setting a default active item if the tab panel has a loader defined. There is this code and pay attention to the comment:

        // Ensure that there is at least one active tab. This is only needed when adding tabs via a loader config, i.e., there 
        // may be no pre-existing tabs. Note that we need to check if activeTab was explicitly set to `null` in the tabpanel 
        // config (which tells the layout not to set an active item), as this is a valid value to mean 'do not set an active tab'. 
        if (me.rendered && me.loader && me.activeTab === undefined && me.layout.activeItem !== null) {
            me.setActiveTab(0);
        }

I don't agree that it's only needed when adding tabs via a loader config. I think if you add an item to a tab panel without an active item then it's reasonable to make that new item active. Therefor you can create an override to patch this:

Ext.define(null, {
    override: 'Ext.tab.Panel',
    
    onAdd: function (item, index) {
        const me = this
        
        me.callParent([ item, index ])
        
        if (me.rendered && me.activeTab === undefined && me.layout.activeItem !== null) {
            me.setActiveTab(0);
        }
    }
})

Here's a fiddle:

[vadimv]

Hey man,

thanks for taking a look, I haven't had time to find an override for it, being pressed by the sprint deadline, was easier for me to finish the ticket with a temp quick dirty fix and then later look on it when having a free window (since I like puzzling too on issues with overrides )

            tabPanel.setActiveTab(analyseTab);


            // ExtJS doesn't fire activate when first item is added, so have to do it here
            if (tabPanel.items.getCount() === 1) {
                analyseTab.fireEvent('activate');
            }

Yeah, I agree too with your conclusion on that comment. So I think we miss the last piece to your solution: removing that tab and adding back should fire activate event as well. To me makes sense that we have to override the doRemove and replace the null with undefined on activeTab assignment, when removing the tab, and callSuper.

doRemove: function

  if (me.removingAll || me.destroying || me.items.getCount() === 1) {
                me.activeTab = undefined; // Replace null with undefined
            }