I have a LWC which diaplays a table of a custom object called ‘Specifications’ which a are grouped by Opportunity line items (parent record of the specifications.
The Opportunity row was read only, but I’ve now added two editable fields (Opp_Delivery_Initial__c and Opp_Sales_Initial__c). They work as they should, except, when adding a value to any one of the new fields in the Opportunity row, it simultaneously populates it into all of the other Opportunity line item rows. I’m not sure if i have variables muddled up, but they seem to be consistent. Ive added a screen shot of LWC in use showing the issue and the handleInputChange below, along with the html. Any help would be appreciated.
JS handleInputChange:
handleInputChange(event) {
const fieldName = event.target.dataset.field;
const recordId = event.target.dataset.id;
const newValue = event.target.value;
// Clone the opportunityProducts array for immutability
let updatedProducts = this.opportunityProducts.map(product => {
// Check if the event's record ID matches the product
if (product.lineItemId === recordId) {
// Create a new object for the product with the updated field
return {
...product,
[fieldName]: newValue
};
} else if (product.specifications) {
// Clone the specifications array for immutability
const updatedSpecifications = product.specifications.map(spec => {
if (spec.Id === recordId) {
return { ...spec, [fieldName]: newValue }; // Update specific specification
}
return spec;
});
// Return the product with the updated specifications
return { ...product, specifications: updatedSpecifications };
}
return product;
});
// Update the tracked property
this.opportunityProducts = updatedProducts;
}
html:
<template for:each={opportunityProducts} for:item="lineItem">
<tr key={lineItem.lineItemId} class="group-header">
<template if:true={isEditing}>
<td colspan="9">
{lineItem.Opportunity_Type__c} Opportunity: QTY: {lineItem.quantity} - {lineItem.Opportunity_Product_Name_Editible__c}:
<div class="normal-text"> - {lineItem.description}</div>
</td>
</template>
<template if:false={isEditing}>
<td colspan="7">
{lineItem.Opportunity_Type__c} Opportunity: QTY: {lineItem.quantity} - {lineItem.Opportunity_Product_Name_Editible__c}:
<div class="normal-text"> - {lineItem.description}</div>
</td>
</template>
<!-- Editable Delivery Initial Field in Group Header Row -->
<td class="delivery-initial-cell">
<template if:true={isEditing}>
<lightning-input
variant="label-hidden"
data-id={lineItem.lineItemId}
value={lineItem.Opp_Delivery_Initial__c}
onchange={handleInputChange}
data-field="Opp_Delivery_Initial__c">
</lightning-input>
</template>
<template if:false={isEditing}>
{lineItem.Opp_Delivery_Initial__c}
</template>
</td>
<!-- Editable Sales Initial Field in Group Header Row -->
<td class="sales-initial-cell">
<template if:true={isEditing}>
<lightning-input
variant="label-hidden"
data-id={lineItem.lineItemId}
value={lineItem.Opp_Sales_Initial__c}
onchange={handleInputChange}
data-field="Opp_Sales_Initial__c">
</lightning-input>
</template>
<template if:false={isEditing}>
{lineItem.Opp_Sales_Initial__c}
</template>
</td>
<template if:true={isEditing}>
<td>
</td>
</template>
</tr>
Tried to add new editable fields to the Opportunity line item row and ensure that any changes are logged and updates saved back to Salesforce.
Expected, when inputting a value into one of these new fields, that it only updates the current record, not all the other records.