7

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

  • What version is your lightning components ? 38.0 or 39.0? – Mohith Shrivastava Feb 4 '17 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 '17 at 20:29
  • What does event.target.id output when you log it to the console? – sfdcfox Feb 4 '17 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 '17 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 '17 at 1:16
4

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"));
    }
})
  • 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 '17 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 '17 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... – BritishBoyinDC Apr 25 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!

  • 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 '17 at 16:29
  • But this really works for me - I did not invent it for the answer ;o) – Itai Shmida Feb 5 '17 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 '17 at 19:54
  • did you put the onactive event on the <lightning:tab> component and not the <lightning:tabset>? – Itai Shmida Feb 5 '17 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 '17 at 19:59
0

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

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

  • 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. – Christian Szandor Knapp Nov 21 '18 at 20:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.