Radio option getting unchecked automatically when new record is opened in a tab

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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0