Event.source returns error "Cannot read property 'get' of undefined"

Question

I am trying the code below(most of it from the Dev Docs here)

Component

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute name="stages" type="String[]" default="Any,Open,Closed,Closed Won"/>
<aura:iteration items="{!v.stages}" var="stage">
 <ui:inputRadio label="{!stage}" change="{!c.onRadio}" />
</aura:iteration>

<b>Selected Item:</b>
<p><ui:outputText class="result" aura:id="radioResult" value="" /></p>

<b>Radio Buttons - Group</b>
<ui:inputRadio aura:id="r0" name="others" label="Prospecting" change="{!c.onGroup}"/>
<ui:inputRadio aura:id="r1" name="others" label="Qualification" change="{!c.onGroup}" value="true"/>
<ui:inputRadio aura:id="r2" name="others" label="Needs Analysis" change="{!c.onGroup}"/>
<ui:inputRadio aura:id="r3" name="others" label="Closed Lost" change="{!c.onGroup}"/>

<b>Selected Items:</b>
<p><ui:outputText class="result" aura:id="radioGroupResult" value="" /></p>
</aura:component>

Controller

({
onRadio: function(cmp, evt) {
     var selected = evt.source.get("v.label");
     var resultCmp = cmp.find("radioResult");
     resultCmp.set("v.value", selected);
 },

 onGroup: function(cmp, evt) {
     var selected = evt.source.get("v.label");
     var resultCmp = cmp.find("radioGroupResult");
     resultCmp.set("v.value", selected);
 }
})

But, when I choose different radio buttons, I get the error:

Cannot read property 'get' of undefined

which basically means evt.source is undefined.This works without locker service and hence it has something to do with locker

Any ideas?

Answer 1

Yes so the issue is Locker expects that we write our Javascript in Strict mode and also as per new release the right method to use is using getSource on an event object

Here is the working code

({
 onRadio: function(cmp, evt) {
   var selected = evt.getSource().get("v.label");
   var resultCmp = cmp.find("radioResult");
   resultCmp.set("v.value", selected);
 },

 onGroup: function(cmp, evt) {
    var selected = evt.getSource().get("v.label");
    var resultCmp = cmp.find("radioGroupResult");
    resultCmp.set("v.value", selected);
   }
})

Just raised an issue with Doc team to update the docs to use getSource() instead of source in the docs.