[SalesForce] Anyone figure out how to get selected tab in lightning:tabset using onselect event

Since event.getSource() always throws an error

[event.getSource is not a function]

so the following is impossible:

Code modified From Here

Component

<aura:component description="myProblemComponent" implements="flexipage:availableForAllPageTypes">

    <div aura:id="data-entry">
        <lightning:tabset onselect="{!c.tabSelected}" variant="default" selectedTabId="tab1">
            <lightning:tab tabindex="1" id="tab1" title="Tab 1" label="Tab 1">

                FIRST TAB
            </lightning:tab>
            <lightning:tab tabindex="2" id="tab2" title="Tab 2" label="Tab 2">
                Second tab
            </lightning:tab>
        </lightning:tabset>


    </div>


</aura:component>

Controller

({
    tabSelected: function(component,event,helper){
        console.log('TAB SELECTED');
        console.log(JSON.stringify(event));

        var a = event.target;

        console.log(a); //null

        var b = event.getSource(); //throws error [event.getSource is not a function]

        console.log(b);

    }
})

So how do we find out which tab has been selected from the onselect event?

JSON.stringify(event.target) null

I also output the event as a JSON string if that helps…

JSON.stringify(event)

{"srcElement":null,"isTrusted":false,"detail":{"selectedTab":{}},"NONE":0,"CAPTURING_PHASE":1,"AT_TARGET":2,"BUBBLING_PHASE":3,"MOUSEDOWN":1,"MOUSEUP":2,"MOUSEOVER":4,"MOUSEOUT":8,"MOUSEMOVE":16,"MOUSEDRAG":32,"CLICK":64,"DBLCLICK":128,"KEYDOWN":256,"KEYUP":512,"KEYPRESS":1024,"DRAGDROP":2048,"FOCUS":4096,"BLUR":8192,"SELECT":16384,"CHANGE":32768,"type":"onSelect","target":null,"currentTarget":null,"eventPhase":0,"bubbles":false,"cancelable":false,"defaultPrevented":false,"timeStamp":39604.285,"returnValue":true,"cancelBubble":false,"path":[],"composed":false}

I have tried to get it using document.querySelector but cannot seem to get the appropriate selector criteria… hmmmmm

I have tried this:

console.log(
     document.querySelector('li.slds-active')
);

but it always return null (with locker service enabled) despite the tab element looking like this:

<li class="slds-tabs--default__item slds-text-heading--label slds-active" role="presentation" title="Tab 1" data-aura-rendered-by="141:0">....</li>

when locker service is disabled it the querySelector works fine which I would expect but without another way to get the selected tab once locker service is force enabled there seems to be no way to tell which tab was selected… lightning:tabset

Just FYI, I attempted the solution to use onactive and this is what dev console shows (v38.0)

enter image description here

Best Answer

selectedTabId is actually a two-way binding. You can determine which tab is selected by setting it to an attribute. Here's your example, modified:

.cmp

<aura:component description="myProblemComponent" implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="selTabId" type="String" default="tab2" />
    <div aura:id="data-entry">
        <lightning:tabset onselect="{!c.tabSelected}" variant="default" selectedTabId="{!v.selTabId}">
            <lightning:tab aura:id="tab1" tabindex="1" id="tab1" title="Tab 1" label="Tab 1">

                FIRST TAB
            </lightning:tab>
            <lightning:tab aura:id="tab2" tabindex="2" id="tab2" title="Tab 2" label="Tab 2">
                Second tab
            </lightning:tab>
        </lightning:tabset>


    </div>
</aura:component>

Controller.js

({
    tabSelected: function(component,event,helper) {
        alert(component.get("v.selTabId"));
    }
})
Related Topic