Winter 17 release : event.getSource is not a function on lightning:button

Question

I'm trying to get the label of the button the user has clicked on by using event.getSource, but I'm getting the error that event.getSource is not a function.

Component

<lightning:button variant="brand" label="Submit" onclick="{!c.save}" />

Controller

save: function(component, event, helper){

    var target = event.getSource();
    console.log(target.get("v.label"));

}

Error

Uncaught Action failed: c$TimeTrackingTab$controller$save [event.getSource is not a function]

I found this function documented by Salesforce here.

Any ideas?

Answer 1

You'll have an official answer in Spring 17, event.getSource() will be the way to go as you were expecting. You can find more in the release notes.

Answer 2

event.getSource() is a proprietary API only available on Aura Events, so, no, you can't use that with lightning:button, just like all components from the lightning namespace, they will not rely on the Aura Proprietary Event System, instead they rely on the DOM Events, using the native event when possible or a custom DOM event, just like a regular <button> will do.

Getting the label of the lightning:button is probably not a good option here, considering that the label might change overtime (maybe even translated), instead you can set the name and/or value on the lightning:button, and use that to identify which button was clicked.

Anyhow, this is an example:

<lightning:button variant="brand" label="Submit" name="save" value="something" onclick="{!c.save}" />

Then in your controller:

({
    save: function (cmp, event) {
        alert(event.currentTarget.name);
        alert(event.currentTarget.value);
    }
})

Answer 3

I notice in Which Button Was Pressed? that they use the press rather than onclick attribute. They also use a ui:button rather than a lightning:button.

With ui:button press is defined as an event. With lightning:button onclick is just an attribute.

To me this suggests that when you click the ui:button there is extra JavaScript building up the event model and populating the extra arguments to the controller method.

In contrast, lightning:button might be directly calling the controller method like any standard client site button.

Looking at the rendered HTML source would likely give you more clues. I could be way off here and it isn't clear why the Base Lightning Component isn't built on top of the ui component with the same press event.

Answer 4

That is the way it should work and Locker is doing what is is supposed to do (defaults to secure) but currently the lightning: namespace components are not correctly granting access to their internal DOM elements from the lightning: namespace to your namespace. Once that is fixed it will work as advertised. Known issue that is supposed to be in progress - I met with the developers that own lightning: back when this came in and explained the change that is required from the lightning:button etc implementation. I was told that this would be fixed in Winter'17 .11 but that did not happen - we're now at .12 - I have pinged the team lead again just now.