I have created a Lightning component that allows users to dynamically create their desired number of records. I implemented a data table for this. In my third column, I asked users to select from two radio options, and based on that selection, I conditionally display another input field. My issue is that only one selector is ever present for the radio buttons, across all rows. Everything still works correctly – the conditional field display is working as intended. But as soon as I add a second row and make a radio selection in that row, the selector disappears from the first row.
As I've said, this isn't affecting functionality, but I don't want to release something this unprofessional looking into production. Appreciate any help anyone can provide!
Here is an image of what the component looks like.
First with only the first row present:
Now with the second row added. Notice that the date value field is still present and retains its value in the first row, even though the radio selector has disappeared and I've chosen the other value in the second row.
Here is my component code. I've omitted the controller and helper code, as they are not involved in this issue, but I'm happy to post them if anyone feels it is necessary.
<aura:component description="STAT_ScheduledPayments" controller="STAT_ChargentCustomLightningCode">
<aura:attribute name="recordId" type="String" description="Opportunity ID that will parent new Chargent Orders; populated by parent component"/>
<aura:attribute name="chargentOrderList" type="ChargentOrders__ChargentOrder__c[]"/>
<aura:attribute name="triggerTypeOptions" type="List" default="[{'label': 'Trigger On Date', 'value': 'Date'},{'label': 'Trigger On Order Status', 'value': 'Order Status'}]"/>
<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<div class="slds-size_1-of-1">
<h1 class="slds-text-heading_medium slds-text-align_center slds-m-bottom_medium">
Schedule Future Payments
</h1>
</div>
<div class="slds-is-relative slds-size_1-of-1">
<lightning:spinner aura:id="spinner_1" variant="brand" size="medium" class="slds-hide"/>
<table class="slds-table slds-table_bordered slds-table_striped slds-size_1-of-1">
<thead>
<tr class="slds-text-title_caps slds-line-height_reset slds-p-horizontal_x-small">
<th scope="col" class="slds-size_1-of-12 slds-text-align_center">
<div class="slds-truncate">#</div>
</th>
<th scope="col" class="slds-size_3-of-12 slds-text-align_center">
<div class="slds-truncate" title="Amount">
<abbr class="slds-required" title="required">*</abbr>Amount
</div>
</th>
<th scope="col" class="slds-size_7-of-12 slds-text-align_center">
<div class="slds-cell-wrap" title="Trigger Type">
<abbr class="slds-required" title="required">*</abbr>Trigger on Date<br/>or Order Status?
</div>
</th>
<th scope="col" class="slds-size_1-of-12 slds-text-align_center">
<div class="slds-truncate" title="Remove">Remove</div>
</th>
</tr>
</thead>
<tbody aura:id="table-body">
<aura:iteration items="{!v.chargentOrderList}" var="co" indexVar="index">
<tr class="slds-hint-parent">
<th data-label="#" scope="row" class="slds-text-align_center slds-p-horizontal_x-small">
{!index + 1}
</th>
<td data-label="Amount" class="slds-p-horizontal_x-small">
<lightning:input name="coAmount" type="number" required="true" variant="label-hidden" value="{!co.ChargentOrders__Subtotal__c}" formatter="currency" step="0.01"/>
</td>
<td data-label="Trigger Type">
<div class="slds-m-horizontal_x-small" data-record="{!co}" data-index="{!index}">
<lightning:radioGroup name="coTriggerType"
variant="label-hidden"
options="{!v.triggerTypeOptions}"
value="{!co.STAT_ScheduledPaymentTriggerType__c}"
type="radio"/><br/>
<aura:if isTrue="{!co.STAT_ScheduledPaymentTriggerType__c == 'Date'}">
<lightning:input name="coDate"
type="date"
value="{!co.ChargentOrders__Payment_Start_Date__c}"
required="{!co.STAT_ScheduledPaymentTriggerType__c == 'Date'}"
label="Date to Process Payment"
class="slds-p-around_none cancel-stripes"/>
</aura:if>
<aura:if isTrue="{!co.STAT_ScheduledPaymentTriggerType__c == 'Order Status'}">
<lightning:select name="coStatus"
label="Order Status to Trigger Payment"
required="{!co.STAT_ScheduledPaymentTriggerType__c == 'Order Status'}"
value="{!co.STAT_OrderStatusTriggeringPayment__c}">
<option value="">choose one...</option>
<option value="Release to Production">Release to Production</option>
<option value="Completed">Completed</option>
</lightning:select>
</aura:if>
</div>
</td>
<td data-label="Remove" class="slds-text-align_center slds-p-horizontal_x-small">
<a onclick="{!c.removeRow}" data-record="{!index}">
<lightning:icon iconName="utility:delete" size="small" alternativeText="Delete"/>
<span class="slds-assistive-text">Delete</span>
</a>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
<div class="slds-float_right slds-p-top_small slds-m-bottom_x-large">
<p class="slds-text-body_small" onclick="{!c.addRow}">
<lightning:buttonIcon iconName="utility:add" size="large" variant="bare" alternativeText="Add"/>
Schedule an Additional Payment
</p>
</div>
<div aura:id="page_footer" class="slds-panel__actions slds-size_1-of-1">
<div class="slds-grid slds-wrap slds-grid_align-spread">
<div class="slds-col">
<lightning:button label="Back" onclick="{!c.handleBack}"/>
</div>
<div class="slds-col">
<lightning:button label="Submit" onclick="{!c.handleSubmit}" variant="brand"/>
<lightning:button label="Cancel" onclick="{!c.handleCancel}"/>
</div>
</div>
</div>
</aura:if>
</div>
</aura:component>
Best Answer
You need a unique name for each group:
This is standard HTML functionality. You can read more about it in the MDN documentation for
<input type="radio">.This is only an example; you can use any sort of unique identifier, just make sure each group has a unique name.