0

I was trying to use standard ui:inputRadio with change="{!c.onRadio}" attribute, precisely as in the below example from documentation:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_ui_inputRadio.htm

<aura:component>
    <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="" />
</aura:component>

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

It doesn't work under Locker Service, because secure DOM seems to lock ui:inputRadio component.

Error: Something has gone wrong. Action failed: c$XXX_LockerTestRadio$controller$onRadio [TypeError: evt.getSource(...).getElement is not a function] Failing descriptor: {c$XXX_LockerTestRadio$controller$onRadio}. Please try again.

Can somebody suggest if this will be solved in the framework or we should plan some workaround?

I will put a workaround in the answer to that post, however it's quite unpleasant that things copied directly from documentation do not work.

2

If you change the line to get the value to

var selected = event.getSource().get("v.label");

you get the correct label. Always use a published API instead of reaching inside the component to look at the DOM.

  • Ok, this works also. At some stage it would be got to update documentation. – Maciek Simm Jul 6 '16 at 16:50
  • Sorry about that. Will file a bug for that. – Gordon Oliver Jul 6 '16 at 21:08
1

A workaround that I found would be to use standard input type="radio" html tag:

Component:

<input type="radio" name="someUniqueName" onchange="{!c.onRadio}" value="{!val}"/></td>

Controller:

onRadio : function(cmp, evt) {
    var elem = evt.target;
    var selected = elem.value;
    ...

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.