8

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

6
  • What version is your lightning components ? 38.0 or 39.0? Feb 4, 2017 at 20:07
  • @MohithShrivastava - I just made them 39.0 and disabled Locker service. Still did not work. I thought I saw a post earlier where getSource no longer worked with locker service but meh. I removed that tag. Maybe it is a lightning component beta thing. Will check using regular ui:tabset tonight....Still getting getSource is not a function
    – Eric
    Feb 4, 2017 at 20:29
  • What does event.target.id output when you log it to the console?
    – sfdcfox
    Feb 4, 2017 at 20:36
  • I'll play with it more tonight. If I knew it worked with a given minimal example I could troubleshoot. But at this point I can not even get that to work so don't know if it is a bug or something I am doing wrong. Guess I am lacking direction lol
    – Eric
    Feb 4, 2017 at 20:41
  • @sfdcfox - update question with full example as well as output....Also, while the meta for the lightning components appears to be 39 in my IDE, it must be at 38 as I am not able to set classes to 39 as it does not exist.
    – Eric
    Feb 5, 2017 at 1:16

3 Answers 3

5

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"));
    }
})
3
  • Thanks for the work around....Much appreciated. Do you think the inability to use getSource() and .get('v.id') like in the documentation is a bug or something that will never be fixed due to locker service and namespacing or whatever the reason may be?
    – Eric
    Feb 5, 2017 at 18:55
  • 1
    @Eric see this question. There's a bug with getSource that is apparently fixed in Spring 17. I feel that using an attribute is actually a better choice anyways, because it also allows you to programmatically specify the selected tab at runtime as well (imagine a button that takes you to a new tab).
    – sfdcfox
    Feb 5, 2017 at 18:59
  • If anyone else ends up here trying to do the same with LWC, this also works with LWC - just track the active-tab-value, and set it in your controller when you need to change it... Apr 25, 2019 at 21:02
0

I have implemented <lightning:tabset> in a different way - you should handle the onselect event on the <lightning:tab> markup, and set the body attribute for the tab content:

Component

<lightning:tabset>

    <lightning:tab label="1st tab" onactive="{!c.loadFirstTab}" >

        <aura:set attribute="body">
            <lightning:card iconName="standard:report" title="first tab">
                This is my first tab
            </lightning:card>
        </aura:set>

    </lightning:tab>

    <lightning:tab onactive="{!c.loadSecondTab}">
        <aura:set attribute="label">
            Additional Report ( same as previous label attribute but here you can add also components)
        </aura:set>

        <aura:set attribute="body">
            <lightning:card iconName="standard:report" title="second tab">
                This is my second tab
            </lightning:card>
        </aura:set>

    </lightning:tab>

</lightning:tabset>

Controller

({
    loadFirstTab : function(component, event, helper) {
        // do whatever you want
    },

    loadSecondTab : function(component, event, helper) {
        // do whatever you want
    }
})

The first tab is the default one so it loads the controller method when page loads. the second tab is loaded only upon clicking on it

Hope it helps!

6
  • Unfortunately there is no event onactive for the lightning tab so it will not compile. I tried onfocus but it fired at unexpected times so it was not usable.....Appreciate the effort you put into the answer though.
    – Eric
    Feb 5, 2017 at 16:29
  • But this really works for me - I did not invent it for the answer ;o) Feb 5, 2017 at 19:52
  • not sure how since it is not a documented attribute (v38/39) nor does the dev console allow you to save. See image in update question (v38). I believe you it works for you just cannot get it to save in my org....
    – Eric
    Feb 5, 2017 at 19:54
  • did you put the onactive event on the <lightning:tab> component and not the <lightning:tabset>? Feb 5, 2017 at 19:58
  • Yes, just like you have it in your code, on the <lightning:tab>. It also does not work on the <lightning:tabset> (fyi) - regardless, sfdcfox's answer seems more appropriate and less technical debt with not having to create a method for each tab
    – Eric
    Feb 5, 2017 at 19:59
0

event.getSource() does not throw an error anymore.

event.getSource().get("v.id") works exactly as documented.

1
  • I almost thought getting the selected tab/tabId via event was still an issue, because I did the following to find out what the event would tell me: JSON.stringify(event) and JSON.stringify(event.getSource()) - both return empty information as described by OP. This led me to believe in a faulty behaviour but I was mistaken. Nov 21, 2018 at 20:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .