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.
Here's section of the rendered html for the grouping Opportunity Product row and the child Specification rows. it shows two grouping Opportunity products, the second row of which has a child specification row:
<tr c-specsheet_specsheet="" class="group-header"
data-id="lineItem.Id">
<td colspan="9" c-specsheet_specsheet="">Main Opportunity: QTY:
1 - KEEL GUARD BLACK - KEEL SHIELD PER 10 ft:<div
class="normal-text" c-specsheet_specsheet=""> - </div></td>
<td c-specsheet_specsheet="" class="delivery-initial-cell">
<lightning-input c-specsheet_specsheet=""
data-field="Opp_Delivery_Initial__c"
variant="label-hidden" class="slds-form-element"
lwc-66unc5l95ad-host="">
<lightning-primitive-input-simple lwc-66unc5l95ad=""
exportparts="input-text, input-container, input"
lwc-enmikoh2qu-host="" variant="label-hidden">
<div lwc-enmikoh2qu="" part="input-text">
<label lwc-enmikoh2qu=""
class="slds-form-element__label slds-no-flex slds-assistive-text"
for="input-686" part="label">
<slot lwc-enmikoh2qu="" name="label-end">
<slot lwc-66unc5l95ad=""
name="label-end" slot="label-end"></slot>
</slot>
</label>
<div lwc-enmikoh2qu=""
class="slds-form-element__control slds-grow"
part="input-container" type="text">
<input class="slds-input" part="input"
lwc-enmikoh2qu="" id="input-686"
type="text"
aria-describedby="help-message-686"
aria-errormessage="help-message-686">
</div>
</div>
<div lwc-enmikoh2qu=""
class="slds-form-element__help"
id="help-message-686" data-help-message=""
part="help-text" role="status"></div>
</lightning-primitive-input-simple>
</lightning-input>
</td>
<td c-specsheet_specsheet="" class="sales-initial-cell">
<lightning-input c-specsheet_specsheet=""
data-field="Opp_Sales_Initial__c" variant="label-hidden"
class="slds-form-element" lwc-66unc5l95ad-host="">
<lightning-primitive-input-simple lwc-66unc5l95ad=""
exportparts="input-text, input-container, input"
lwc-enmikoh2qu-host="" variant="label-hidden">
<div lwc-enmikoh2qu="" part="input-text">
<label lwc-enmikoh2qu=""
class="slds-form-element__label slds-no-flex slds-assistive-text"
for="input-684" part="label">
<slot lwc-enmikoh2qu="" name="label-end">
<slot lwc-66unc5l95ad=""
name="label-end" slot="label-end"></slot>
</slot>
</label>
<div lwc-enmikoh2qu=""
class="slds-form-element__control slds-grow"
part="input-container" type="text">
<input class="slds-input" part="input"
lwc-enmikoh2qu="" id="input-684"
type="text"
aria-describedby="help-message-684"
aria-errormessage="help-message-684">
</div>
</div>
<div lwc-enmikoh2qu=""
class="slds-form-element__help"
id="help-message-684" data-help-message=""
part="help-text" role="status"></div>
</lightning-primitive-input-simple>
</lightning-input>
</td>
<td c-specsheet_specsheet=""></td>
</tr>
<tr c-specsheet_specsheet="" class="group-header"
data-id="lineItem.Id">
<td colspan="9" c-specsheet_specsheet="">Main Opportunity: QTY:
1 - YT FOLDING CONSOLE (FWD):<div class="normal-text"
c-specsheet_specsheet=""> - </div></td>
<td c-specsheet_specsheet="" class="delivery-initial-cell">
<lightning-input c-specsheet_specsheet=""
data-field="Opp_Delivery_Initial__c"
variant="label-hidden" class="slds-form-element"
lwc-66unc5l95ad-host="">
<lightning-primitive-input-simple lwc-66unc5l95ad=""
exportparts="input-text, input-container, input"
lwc-enmikoh2qu-host="" variant="label-hidden">
<div lwc-enmikoh2qu="" part="input-text">
<label lwc-enmikoh2qu=""
class="slds-form-element__label slds-no-flex slds-assistive-text"
for="input-690" part="label">
<slot lwc-enmikoh2qu="" name="label-end">
<slot lwc-66unc5l95ad=""
name="label-end" slot="label-end"></slot>
</slot>
</label>
<div lwc-enmikoh2qu=""
class="slds-form-element__control slds-grow"
part="input-container" type="text">
<input class="slds-input" part="input"
lwc-enmikoh2qu="" id="input-690"
type="text"
aria-describedby="help-message-690"
aria-errormessage="help-message-690">
</div>
</div>
<div lwc-enmikoh2qu=""
class="slds-form-element__help"
id="help-message-690" data-help-message=""
part="help-text" role="status"></div>
</lightning-primitive-input-simple>
</lightning-input>
</td>
<td c-specsheet_specsheet="" class="sales-initial-cell">
<lightning-input c-specsheet_specsheet=""
data-field="Opp_Sales_Initial__c" variant="label-hidden"
class="slds-form-element" lwc-66unc5l95ad-host="">
<lightning-primitive-input-simple lwc-66unc5l95ad=""
exportparts="input-text, input-container, input"
lwc-enmikoh2qu-host="" variant="label-hidden">
<div lwc-enmikoh2qu="" part="input-text">
<label lwc-enmikoh2qu=""
class="slds-form-element__label slds-no-flex slds-assistive-text"
for="input-688" part="label">
<slot lwc-enmikoh2qu="" name="label-end">
<slot lwc-66unc5l95ad=""
name="label-end" slot="label-end"></slot>
</slot>
</label>
<div lwc-enmikoh2qu=""
class="slds-form-element__control slds-grow"
part="input-container" type="text">
<input class="slds-input" part="input"
lwc-enmikoh2qu="" id="input-688"
type="text"
aria-describedby="help-message-688"
aria-errormessage="help-message-688">
</div>
</div>
<div lwc-enmikoh2qu=""
class="slds-form-element__help"
id="help-message-688" data-help-message=""
part="help-text" role="status"></div>
</lightning-primitive-input-simple>
</lightning-input>
</td>
<td c-specsheet_specsheet=""></td>
</tr>
<tr c-specsheet_specsheet="" class="draggable-row"
data-id="a2TS80000013iOwMAI">
<td c-specsheet_specsheet="" class="drag-handle mobile-hidden"
draggable="true">
<lightning-icon c-specsheet_specsheet="" draggable="true"
icon-name="utility:drag"
class="slds-icon-utility-drag slds-icon_container"
lwc-4897l11qtae-host="">
<span lwc-4897l11qtae=""
style="--sds-c-icon-color-background: var(--slds-c-icon-color-background, transparent)"
part="boundary">
<lightning-primitive-icon lwc-4897l11qtae=""
exportparts="icon" size="small" variant=""
lwc-5cqjs7seh9p-host="">
<svg focusable="false" aria-hidden="true"
viewBox="0 0 520 520" part="icon"
lwc-5cqjs7seh9p="" data-key="drag"
class="slds-icon slds-icon-text-default slds-icon_small">
<g lwc-5cqjs7seh9p="">
<path
d="M309 343c0 18-22 25-32 10l-20-43c-11-19-35-23-53-11l-13 10 67 159c3 7 10 11 18 11h176c9 0 16-6 18-14l31-111c8-31-10-61-38-72l-80-27c-113-41-76 84-74 88zM18 285h58v58H18zM144 40h58v58h-58zm0 380h58v58h-58zM18 158h58v58H18zm0-117h58v58H18zm253-1h58v58h-58zm127 0h58v58h-58zM18 421h58v58H18zm380-253h58v58h-58z"
lwc-5cqjs7seh9p=""></path>
</g>
</svg>
</lightning-primitive-icon>
<span class="slds-assistive-text" lwc-4897l11qtae="">
Drag</span>
</span>
</lightning-icon>
</td>
<td c-specsheet_specsheet="" class="spec-name">
<lightning-input c-specsheet_specsheet=""
data-id="a2TS80000013iOwMAI" data-field="Name"
variant="label-hidden" class="slds-form-element"
lwc-66unc5l95ad-host="">
<lightning-primitive-input-simple lwc-66unc5l95ad=""
exportparts="input-text, input-container, input"
lwc-enmikoh2qu-host="" variant="label-hidden">
<div lwc-enmikoh2qu="" part="input-text"
populated="">
<label lwc-enmikoh2qu=""
class="slds-form-element__label slds-no-flex slds-assistive-text"
for="input-716" part="label">
<slot lwc-enmikoh2qu="" name="label-end">
<slot lwc-66unc5l95ad=""
name="label-end" slot="label-end"></slot>
</slot>
</label>
<div lwc-enmikoh2qu=""
class="slds-form-element__control slds-grow"
part="input-container" type="text">
<input class="slds-input" part="input"
lwc-enmikoh2qu="" id="input-716"
type="text"
aria-describedby="help-message-716"
aria-errormessage="help-message-716">
</div>
</div>
<div lwc-enmikoh2qu=""
class="slds-form-element__help"
id="help-message-716" data-help-message=""
part="help-text" role="status"></div>
</lightning-primitive-input-simple>
</lightning-input>
</td>
handleInputChange()called after the html is rendered? What are the steps to recreate the error?