1

I have created a lightning card on record which has two radio option and 1st radio option is checked by default. It is working fine when I open only one case record but when I am opening another case record in new tab, both the radio option in 1st case record tab are getting unchecked automatically. I am using aura:id.

<aura:component implements="force:hasRecordId,flexipage:availableForRecordHome" controller="CaseAssetController">

<aura:attribute name="selectObjectOptions" type="List" default="[
                                                   {'label': 'Select asset', 'value': 'Asset','checked':'true' },
                                                   {'label': 'Select product', 'value': 'Product'},
                                                   ]"/>
<aura:attribute name="selectedValue" type="String" default="Asset"/>
<article class="slds-card">
   <div class="slds-card__header slds-grid">         
        <!--Header component-->
    </div>

    <div class="slds-card__body slds-card__body_inner">
         <lightning:radioGroup name="objectSelection" 
                      label=""
                      options="{! v.selectObjectOptions }"
                      value="{! v.selectedValue }"
                      type="radio"
                      onchange="{!c.onSelectionClick}"
                      class="customRadioCls"
                      aura:id="{!'Case'+v.recordId}"
                      />
                      </article>

</aura:component>
  • Are you referring to Lightning tabs in a console, or browser tabs? – sfdcfox Apr 17 at 10:36
  • Lightning tabs in console – devforce Apr 17 at 10:39
1

HTML uses the "name" of a radio group to determine if multiple inputs belong to the same group. By using this component in multiple tabs, you're confusing the browser into thinking the different options on both tabs belong to the same group. You'll need to come up with a way to generate unique names for each group. Off of the top of my head, I'd say you'd want to generate a unique name for each group via the shared helper:

Component Markup

<aura:attribute name="groupName" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.init}" />
...
     <lightning:radioGroup name="{!v.groupName}" 
                  label=""
                  options="{! v.selectObjectOptions }"
                  value="{! v.selectedValue }"
                  type="radio"
                  onchange="{!c.onSelectionClick}"
                  class="customRadioCls"
                  aura:id="{!'Case'+v.recordId}"
                  />

Controller

({ 
  init: function(c, e, h) {
    h.generateUniqueName(c);
  }
})

Helper

({
  generateUniqueName: function(c) {
    if(!this.guid) {
      this.guid = 0;
    }
    this.guid = this.guid + 1;
    c.set("v.groupName", "objectSelection"+guid);
  }
})

By using a technique like this, you'll avoid potential conflicts. However, given the use case, you might even just take it a step further and generate a totally "random" group name to avoid any likelihood of a collision:

({
  generateUniqueName: function(c) {
    c.set("v.groupName", "group"+Math.random());
  }
})

It doesn't matter what the group name is, so long as it is distinct from other groups within the page. This is, unfortunately, a limitation of HTML, and not something that Lightning can fix directly.

  • I gave unique names for radio options and it works properly now. Thanks !! – devforce Apr 17 at 11:32

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.